`
liudong19870227
  • 浏览: 32064 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Backbone实现简单的ListView

阅读更多

准备用Backbone实现一个简单的ListView,有的功能:

1.页面用模版渲染一个json数组数据(没有去请求数据库,简单的模拟)

2.绑定每个item,单击可以找到对应的model(该model即对象中包括创建时的所有属性)

 

在这里简单谈谈单页面应用(SPA)和传统的多页面(如JSP)开发的不同之处,多页面中每次得到一个列表,如果单击item去查看详情,一般都要去更具id到数据库再去找该对象,然后再新的页面中展示,其实负责渲染该列表的List中已经有该对象了,再去请求一次服务器是不是很不友好呢?在单页面中就没有这个问题,单击每个Item就可以找到该对象,然后直接渲染数据就可以了,省去了再去请求服务器。在这里只是简单的说说在做项目中的体会~

 

下面看代码吧:

$(function(){
	//创建简单的User类
	var User = Backbone.Model.extend({
	});
	//User的集合
	var UserList = Backbone.Collection.extend({
		model:User
	});
	//增加一些测试数据
	var Users = new UserList;
	Users.add([{'name':'zhangsan'},{'name':'lisi'}]);
	//ListView中的每个Item的视图
	var ItemView = Backbone.View.extend({
		tagName:'li',
		//_.template是Underscore中的方法
		template:_.template($('#itemTmpl').html()),
		// **render** is the core function that your view should override, in order
	    // to populate its element (`this.el`), with the appropriate HTML. The
	    // convention is for **render** to always return `this`.
		render: function() {
			//下面是this.el获得的源码
			/**
			if (!this.el) {
	        	var attrs = this.attributes || {};
	        	if (this.id) attrs.id = this.id;
	        	if (this.className) attrs['class'] = this.className;
	        	this.el = this.make(this.tagName, attrs);
		    }else if (_.isString(this.el)) {
		      this.el = $(this.el).get(0);
		    }
		    **/
			//可以看出this.el是通过make方法动态创建的
			//this.model接收在new的时候传入的user
			$(this.el).html(this.template(this.model.toJSON()));
			return this;//always return this
	    },
		events:{
			"click":"viewDetail"//绑定单击事件
		},
		viewDetail:function(){
			console.log(this.model.toJSON());
			alert('你选择了'+this.model.get('name'));
		}
	});
	//主视图
	var AppView = Backbone.View.extend({
		initialize:function(){
			//绑定一些事件
		},
		addAll:function(){
			//实际开发中是先从服务器load数据,然后再执行下面,因此从服务器load数据应该是
			//在该视图初始化的时候就执行,可以在初始化的时候调用fetch()方法
			Users.each(function(user){
				console.log(user);
				//将user传入ItemView中
				var view = new ItemView({model: user});
			    $('#listView').append(view.render().el);
			});
		}
	});
	//入口
	new AppView().addAll();
});

 代码中都加了注释,很容易理解的。

 

 

3
5
分享到:
评论

相关推荐

    resnet50、resnet101 backbone实现的FCN 图像语义分割模型、迁移学习

    resnet50、resnet101 backbone实现的FCN 图像语义分割模型、迁移学习;resnet50、resnet101 backbone实现的FCN 图像语义分割模型、迁移学习;resnet50、resnet101 backbone实现的FCN 图像语义分割模型、迁移学习;...

    backbone实现的一个小demo

    在这个"backbone实现的一个小demo"中,开发者使用Backbone来展示如何在Web应用中有效地组织代码和管理数据流。 1. **Backbone.Model**: Model是Backbone的核心组件之一,它用于封装应用中的数据和业务逻辑。在这个...

    [MongoDB] Node.js 应用程序开发 (MongoDB 及 Backbone 实现) (英文版)

    [奥莱理] Node.js 应用程序开发 (MongoDB 及 Backbone 实现) (英文版) [奥莱理] Building Node Applications with MongoDB and Backbone (E-Book) ☆ 出版信息:☆ [作者信息] Mike Wilson [出版机构] 奥莱理 ...

    Backbone.ListView:Backbone.js 的通用 ListView

    Backbone.ListView Backbone.js 的通用 ListView,可以更快地构建视图列表。 例子: var contacts = new Backbone . Collection ( [ { name : "Tim Schneider" , age : 35 } , { name : "John Black" , age : 26 }] ...

    backbone.listview:一个简单的用于骨干网的ListView

    主干列表视图一个简单的ListView for Backbone。 支持Backbone.Collection类的API。 set , reset , add , remove , push , pop , shift , unshift 。 注意:这没有实现Marionette.CollectionView般的行为,但...

    BackBone介绍及使用

    4. **Router**:路由器是Backbone实现单页面应用(SPA)的关键。它监听浏览器的哈希变化(#),并根据路由规则调用相应的函数,实现页面的无刷新跳转。 5. **Events**:事件系统是Backbone的一个重要特性,它允许...

    backbone实现todoMVC

    TodoMVC是一个经典的示例,用于演示各种前端框架如何实现一个简单的任务管理应用,让我们一起深入探讨如何用Backbone实现TodoMVC。 首先,我们需要理解Backbone的核心组件: 1. **Model**: Model是数据的容器,它...

    Java 演示 backbone 基本用法

    4. **Backbone.Router**: 路由器负责处理URL和应用状态之间的映射,实现了前端路由功能。通过定义路由规则,可以实现页面无刷新跳转,增强了单页应用的用户体验。 5. **Backbone.sync**: 这是Backbone与服务器进行...

    YOLOX-结合YOLOX+SwinTransformer作为Backbone实现的目标检测算法-附预训练权重下载+项目源码

    YOLOX_结合YOLOX+SwinTransformer作为Backbone实现的目标检测算法_附预训练权重下载+项目源码_优质项目实战

    web前端框架MVC(backBone)实现记账应用,后端使用node.js(版本: lpNote-1.0)

    解压这个文件后,开发者可以查看和研究项目的具体实现,包括Backbone.js和Node.js的代码逻辑。 总的来说,这个项目为我们提供了一个学习和实践Web前端MVC框架Backbone.js以及后端Node.js的实例。通过这个项目,我们...

    backbone 资料

    使用这些资料,你可以深入理解Backbone的各个方面,包括如何创建Model、View、Collection和Router,以及如何利用Backbone的事件系统来实现数据的双向绑定。通过学习和实践,你将能够更好地运用Backbone来构建结构...

    backbone整合require例子

    Backbone.js是一个轻量级的JavaScript库,用于构建可维护的前端应用程序,而RequireJS则是一个AMD(异步模块定义)规范的实现,用于管理和组织JavaScript模块。 **描述分析:** 描述中提到的是一个基于Backbone.js...

    Backbone.js(1.1.2) API中文文档.zip Backbone.js离线文档

    Backbone.js是一款轻量级的JavaScript库,专为构建丰富的Web应用程序而设计。它通过提供模型(Models)、视图(Views)、集合(Collections)和路由器(Routers)等核心概念,帮助开发者组织代码并实现MVC(Model-...

    backbone官方Todo示例_修正

    "backbone官方Todo示例_修正"是一个很好的学习资源,它演示了如何使用Backbone.js来构建一个简单的待办事项管理应用。 1. **模型(Model)**:在Backbone中,模型是应用程序数据的核心,通常对应于服务器上的JSON对象...

    Backbone 文档

    Backbone也依赖Underscore,很多内部实现都使用了Underscore的函数。 "app.js"是应用的主逻辑文件,这里定义了应用的特定Model、View、Collection和Router。你可以看到如何在Backbone中定义数据模型,设置模型的...

    backbone框架在实例中的应用~简单易学

    在这个"backbone框架在实例中的应用~简单易学"的主题中,我们将深入探讨Backbone的关键特性及其在实际项目中的应用。 首先,Backbone的Model是数据管理的核心。它封装了应用程序的数据,提供了数据的CRUD(创建、...

    backbone文档

    4. **Router**:Router是Backbone.js中的路由管理器,它实现了浏览器的哈希变化(#hashchange)或HTML5的pushState,将URL映射到不同的应用功能,实现了单页应用(SPA)的导航。 此外,Backbone.sync是模型和服务器...

    BACKBONE.JS应用程序开发

    , 《backbone.js应用程序开发》先从了解mvc、spa和backbone的基本知识开始,然后着手构建示例应用程序——一个简单的todo列表应用程序、restful风格的图书应用程序、以及使用backbone和requirejs的模块化应用程序。...

    backbone_js_1.1.2

    路由器(Routers)在Backbone.js中用于实现客户端路由,它可以监听URL的变化,并据此调用相应的方法,实现页面的无刷新跳转,从而支持单页应用(SPA)的构建。 `backbone.js`文件是未压缩的源代码版本,适合开发和...

Global site tag (gtag.js) - Google Analytics