因为最近的工作中使用到了backbone.js框架,所以在网上找了些资料,但是关于这个框架的中文资料实在是太少了,没有办法,只好自己翻译了壹篇简单的入门教材。如果翻译得不好,请大家口下留情。另外,大家也可以签出 Agility.js 的代码,它也是壹个用于替代Backbone.js的壹个简单框架。这是壹个简单的 Backbone.js 教程,由不言自明的"Hello World"到日益复杂的例子组成,它的出现是为了提供壹个平滑的从零过渡到流行的 Todos样例。Backbone.js提供了壹个简化的用于组织你的Javascript应用的MVC框架。目的是为了得到更加容易维护的代码,通过解...
因为最近的工作中使用到了backbone.js框架,所以在网上找了些资料,但是关于这个框架的中文资料实在是太少了,没有办法,只好自己翻译了壹篇简单的入门教材。如果翻译得不好,请大家口下留情。另外,大家也可以签出 Agility.js 的代码,它也是壹个用于替代Backbone.js的壹个简单框架。
这是壹个简单的
Backbone.js 教程,由不言自明的"Hello World"到日益复杂的例子组成,它的出现是为了提供壹个平滑的从零过渡到流行的
Todos样例。
Backbone.js提供了壹个简化的用于组织你的Javascript应用的MVC框架。目的是为了得到更加容易维护的代码,通过解开那些富客户端应用中类似“意大利面条”式,在DOM的不同部分和后端服务器中的回调绑定。
教程开始于最小化的视图(View)对象,并且逐步的介绍事件绑定、事件处理、模型与集合。壹旦进入教程,可以使用右上角的导航菜单来查看其它例子。例子的序号按照其复杂程度递增。
下面的代码是基于HTML5的页面,最好使用最新版本的Firefox/Chrome/Opera/Safari浏览,不要用IE浏览器,你懂的。
05 |
< title >hello-backbonejs</ title > |
08 |
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></ script > |
09 |
< script src = "http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js" ></ script > |
10 |
< script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js" ></ script > |
11 |
< script src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js" ></ script > |
13 |
< script src = "...number.js..." type = "text/javascript" ></ script > |
1.js 本例说明最小化的视图的声明与实例化。效果演示看这里。
ListView类:是我们的主要的应用视图。
initialize():自动调用上述实例,你可以在这里做除了界面元素事件以外的所有类型的绑定,比如说单击事件等等。
render():用于渲染整个视图的函数。this.el:需要用户手动调用。
listView实例:实例化整个视图。
03 |
var ListView = Backbone.View.extend({ |
06 |
initialize: function (){ |
07 |
_.bindAll( this , 'render' ); |
13 |
$( this .el).append( "<ul> <li>hello world</li> </ul>" ); |
17 |
var listView = new ListView(); |
2.js 本例说明如何绑定DOM事件到视图的方法中。效果演示看这里。
events:DOM事件绑定到视图方法中,Backbone没有独立的控制器来处理这种绑定,它们全部发生在视图层中。
render():正在展示如何将壹个按钮来添加到新的list条目中。
addItem():通过上述点击事件自动触发的自定义的函数。
02 |
var ListView = Backbone.View.extend({ |
06 |
'click button#add' : 'addItem' |
08 |
initialize: function (){ |
09 |
_.bindAll( this , 'render' , 'addItem' ); |
16 |
$( this .el).append( "<button id='add'>Add list item</button>" ); |
17 |
$( this .el).append( "<ul></ul>" ); |
22 |
$( 'ul' , this .el).append( "<li>hello world" + this .counter+ "</li>" ); |
26 |
var listView = new ListView(); |
3.js 这个样例说明如何使用模型中的集合来存储数据,以及如何将数据的改变绑定到视图。演示效果看这里。
Item 类:模型层的原子(最小)部分。壹个模型是壹个基本的Javascript对象,例如:键值对,以及壹些用于事件响应、数据持久化的帮助函数等。
List 类:壹个条目的集合。基本上是壹些模型对象的数组和壹些帮助函数。
initialize() 正在实例化壹个集合,并且绑定它的添加事件到自己的方法 appendItem。(Backbone不在壹个单独的控制器中提供回调函数用于绑定)。
Save 参考这个以便它能够访问下面的callback范围内的数据。
addItem() 现在独立处理模型与视图。现在视图更新被授予下面的事件监听器 appendItem()。
appendItem() 被集合事件add触发,可视化的处理更新。
03 |
var Item = Backbone.Model.extend({ |
11 |
var List = Backbone.Collection.extend({ |
15 |
var ListView = Backbone.View.extend({ |
18 |
'click button#add' : 'addItem' |
21 |
initialize: function (){ |
22 |
_.bindAll( this , 'render' , 'addItem' , 'appendItem' ); |
24 |
this .collection = new List(); |
25 |
this .collection.bind( 'add' , this .appendItem); |
33 |
$( this .el).append( "<button id='add'>Add list item</button>" ); |
34 |
$( this .el).append( "<ul></ul>" ); |
35 |
_( this .collection.models).each( function (item){ |
44 |
part2: item.get( 'part2' ) + this .counter |
46 |
this .collection.add(item); |
49 |
appendItem: function (item){ |
50 |
$( 'ul' , this .el).append( "<li>" +item.get( 'part1' )+ " " +item.get( 'part2' )+ "</li>" ); |
54 |
var listView = new ListView(); |
4.js 这个样例说明如何渲染模型到专门查看的视图。演示效果看这里。
ItemView 类:负责渲染每个独立的条目。
appendItem() 不再负责渲染独立的项目。它现在授予 render() 方法到每个独立的 ItemView 实例。
02 |
var Item = Backbone.Model.extend({ |
09 |
var List = Backbone.Collection.extend({ |
13 |
var ItemView = Backbone.View.extend({ |
15 |
initialize: function (){ |
16 |
_.bindAll( this , 'render' ); |
19 |
$( this .el).html( '<span>' + this .model.get( 'part1' )+ ' ' + this .model.get( 'part2' )+ '</span>' ); |
24 |
var ListView = Backbone.View.extend({ |
27 |
'click button#add' : 'addItem' |
29 |
initialize: function (){ |
30 |
_.bindAll( this , 'render' , 'addItem' , 'appendItem' ); |
32 |
this .collection = new List(); |
33 |
this .collection.bind( 'add' , this .appendItem); |
40 |
$( this .el).append( "<button id='add'>Add list item</button>" ); |
41 |
$( this .el).append( "<ul></ul>" ); |
42 |
_( this .collection.models).each( function (item){ |
50 |
part2: item.get( 'part2' ) + this .counter |
52 |
this .collection.add(item); |
55 |
appendItem: function (item){ |
56 |
var itemView = new ItemView({ |
59 |
$( 'ul' , this .el).append(itemView.render().el); |
63 |
var listView = new ListView(); |
5.js 本例介绍两个新的模型动作(交换与删除) 说明这些动作应该如何在模型的视图中被处理。演示效果看这里。
Backbone.sync:使用匿名函数重载持久化存储。这个属性允许在不抛出异常信息的前提下使用 Model.destroy()。
ItemViews 对于每个条目响应两个点击动作,交换与删除。
initialize() 绑定模型更改与删除到适当的事件。
render() 包含两个额外的span以响应交换与删除事件。
unrender():让模型从DOM中移除它自己。
swap() 会在内部交换条目的属性,当.set()模型函数被调用,事务更新将会被触发。
remove():我们使用destroy()方法从集合中移除模型。通常这也会从持久存储中删除记录,但是我们重载了它(参考以上例子)。
03 |
Backbone.sync = function (method, model, success, error){ |
07 |
var Item = Backbone.Model.extend({ |
14 |
var List = Backbone.Collection.extend({ |
18 |
var ItemView = Backbone.View.extend({ |
22 |
'click span.swap' : 'swap' , |
23 |
'click span.delete' : 'remove' |
26 |
initialize: function (){ |
27 |
_.bindAll( this , 'render' , 'unrender' , 'swap' , 'remove' ); |
29 |
this .model.bind( 'change' , this .render); |
30 |
this .model.bind( 'remove' , this .unrender); |
34 |
$( this .el).html( '<span style="color:black;">' + this .model.get( 'part1' )+ ' ' + this .model.get( 'part2' )+ '</span> <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>' ); |
44 |
part1: this .model.get( 'part2' ), |
45 |
part2: this .model.get( 'part1' ) |
47 |
this .model.set(swapped); |
56 |
var ListView = Backbone.View.extend({ |
59 |
'click button#add' : 'addItem' |
61 |
initialize: function (){ |
62 |
_.bindAll( this , 'render' , 'addItem' , 'appendItem' ); |
64 |
this .collection = new List(); |
65 |
this .collection.bind( 'add' , this .appendItem); |
72 |
$( this .el).append( "<button id='add'>Add list item</button>" ); |
73 |
$( this .el).append( "<ul></ul>" ); |
74 |
_( this .collection.models).each( function (item){ |
82 |
part2: item.get( 'part2' ) + this .counter |
84 |
this .collection.add(item); |
86 |
appendItem: function (item){ |
87 |
var itemView = new ItemView({ |
90 |
$( 'ul' , this .el).append(itemView.render().el); |
94 |
var listView = new ListView(); |