准备用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();
});
代码中都加了注释,很容易理解的。
分享到:
相关推荐
resnet50、resnet101 backbone实现的FCN 图像语义分割模型、迁移学习;resnet50、resnet101 backbone实现的FCN 图像语义分割模型、迁移学习;resnet50、resnet101 backbone实现的FCN 图像语义分割模型、迁移学习;...
在这个"backbone实现的一个小demo"中,开发者使用Backbone来展示如何在Web应用中有效地组织代码和管理数据流。 1. **Backbone.Model**: Model是Backbone的核心组件之一,它用于封装应用中的数据和业务逻辑。在这个...
[奥莱理] Node.js 应用程序开发 (MongoDB 及 Backbone 实现) (英文版) [奥莱理] Building Node Applications with MongoDB and Backbone (E-Book) ☆ 出版信息:☆ [作者信息] Mike Wilson [出版机构] 奥莱理 ...
Backbone.ListView Backbone.js 的通用 ListView,可以更快地构建视图列表。 例子: var contacts = new Backbone . Collection ( [ { name : "Tim Schneider" , age : 35 } , { name : "John Black" , age : 26 }] ...
主干列表视图一个简单的ListView for Backbone。 支持Backbone.Collection类的API。 set , reset , add , remove , push , pop , shift , unshift 。 注意:这没有实现Marionette.CollectionView般的行为,但...
4. **Router**:路由器是Backbone实现单页面应用(SPA)的关键。它监听浏览器的哈希变化(#),并根据路由规则调用相应的函数,实现页面的无刷新跳转。 5. **Events**:事件系统是Backbone的一个重要特性,它允许...
TodoMVC是一个经典的示例,用于演示各种前端框架如何实现一个简单的任务管理应用,让我们一起深入探讨如何用Backbone实现TodoMVC。 首先,我们需要理解Backbone的核心组件: 1. **Model**: Model是数据的容器,它...
4. **Backbone.Router**: 路由器负责处理URL和应用状态之间的映射,实现了前端路由功能。通过定义路由规则,可以实现页面无刷新跳转,增强了单页应用的用户体验。 5. **Backbone.sync**: 这是Backbone与服务器进行...
YOLOX_结合YOLOX+SwinTransformer作为Backbone实现的目标检测算法_附预训练权重下载+项目源码_优质项目实战
解压这个文件后,开发者可以查看和研究项目的具体实现,包括Backbone.js和Node.js的代码逻辑。 总的来说,这个项目为我们提供了一个学习和实践Web前端MVC框架Backbone.js以及后端Node.js的实例。通过这个项目,我们...
使用这些资料,你可以深入理解Backbone的各个方面,包括如何创建Model、View、Collection和Router,以及如何利用Backbone的事件系统来实现数据的双向绑定。通过学习和实践,你将能够更好地运用Backbone来构建结构...
Backbone.js是一个轻量级的JavaScript库,用于构建可维护的前端应用程序,而RequireJS则是一个AMD(异步模块定义)规范的实现,用于管理和组织JavaScript模块。 **描述分析:** 描述中提到的是一个基于Backbone.js...
Backbone.js是一款轻量级的JavaScript库,专为构建丰富的Web应用程序而设计。它通过提供模型(Models)、视图(Views)、集合(Collections)和路由器(Routers)等核心概念,帮助开发者组织代码并实现MVC(Model-...
"backbone官方Todo示例_修正"是一个很好的学习资源,它演示了如何使用Backbone.js来构建一个简单的待办事项管理应用。 1. **模型(Model)**:在Backbone中,模型是应用程序数据的核心,通常对应于服务器上的JSON对象...
Backbone也依赖Underscore,很多内部实现都使用了Underscore的函数。 "app.js"是应用的主逻辑文件,这里定义了应用的特定Model、View、Collection和Router。你可以看到如何在Backbone中定义数据模型,设置模型的...
在这个"backbone框架在实例中的应用~简单易学"的主题中,我们将深入探讨Backbone的关键特性及其在实际项目中的应用。 首先,Backbone的Model是数据管理的核心。它封装了应用程序的数据,提供了数据的CRUD(创建、...
4. **Router**:Router是Backbone.js中的路由管理器,它实现了浏览器的哈希变化(#hashchange)或HTML5的pushState,将URL映射到不同的应用功能,实现了单页应用(SPA)的导航。 此外,Backbone.sync是模型和服务器...
, 《backbone.js应用程序开发》先从了解mvc、spa和backbone的基本知识开始,然后着手构建示例应用程序——一个简单的todo列表应用程序、restful风格的图书应用程序、以及使用backbone和requirejs的模块化应用程序。...
路由器(Routers)在Backbone.js中用于实现客户端路由,它可以监听URL的变化,并据此调用相应的方法,实现页面的无刷新跳转,从而支持单页应用(SPA)的构建。 `backbone.js`文件是未压缩的源代码版本,适合开发和...