Backbone.js 简易入门教程

最新推荐文章于 2025-09-25 00:46:54 发布

转载最新推荐文章于 2025-09-25 00:46:54 发布 · 8.7k 阅读

本文档为Backbone.js框架的入门教程，从简单的HelloWorld示例开始，逐步介绍到复杂的视图、模型和集合操作。Backbone.js提供了一个简化版的MVC架构，有助于组织JavaScript应用程序并提高代码可维护性。

因为最近的工作中使用到了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浏览器，你懂的。

 
    01<!DOCTYPE html> 
 
    02<html> 
 
    03<head> 
 
    04<meta charset="utf-8"> 
 
    05<title>hello-backbonejs</title> 
 
    06</head> 
 
    07<body> 
 
    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> 
 
    12
 
    13<script src="...number.js..." type="text/javascript"></script> 
 
    14</body> 
 
    15</html>

1.js 本例说明最小化的视图的声明与实例化。效果演示看这里。

ListView类：是我们的主要的应用视图。

initialize()：自动调用上述实例，你可以在这里做除了界面元素事件以外的所有类型的绑定，比如说单击事件等等。

render()：用于渲染整个视图的函数。this.el：需要用户手动调用。

listView实例：实例化整个视图。

 
    01(function($){ 
 
    02//自运行的闭包 
 
    03var ListView = Backbone.View.extend({ 
 
    04el: $('body'), // attaches `this.el` to an existing element. 
 
    05
 
    06initialize: function(){ 
 
    07_.bindAll(this, 'render'); // fixes loss of context for 'this' within methods 
 
    08
 
    09this.render(); // not all views are self-rendering. This one is. 
 
    10}, 
 
    11
 
    12render: function(){ 
 
    13$(this.el).append("<ul> <li>hello world</li> </ul>"); 
 
    14} 
 
    15}); 
 
    16
 
    17var listView = new  ListView(); 
 
    18})(jQuery);

2.js 本例说明如何绑定DOM事件到视图的方法中。效果演示看这里。

events：DOM事件绑定到视图方法中，Backbone没有独立的控制器来处理这种绑定，它们全部发生在视图层中。

render()：正在展示如何将壹个按钮来添加到新的list条目中。

addItem()：通过上述点击事件自动触发的自定义的函数。

 
    01(function($){ 
 
    02var ListView = Backbone.View.extend({ 
 
    03el: $('body'), // el attaches to existing element 
 
    04
 
    05events: { 
 
    06'click button#add': 'addItem'
 
    07}, 
 
    08initialize: function(){ 
 
    09_.bindAll(this, 'render',  'addItem');  // every function that uses 'this' as the current object should be in here 
 
    10
 
    11this.counter = 0; // total number of items added thus far  
 
    12this.render(); 
 
    13}, 
 
    14
 
    15render: function(){ 
 
    16$(this.el).append("<button id='add'>Add list item</button>"); 
 
    17$(this.el).append("<ul></ul>"); 
 
    18}, 
 
    19
 
    20addItem: function(){ 
 
    21this.counter++; 
 
    22$('ul', this.el).append("<li>hello world"+this.counter+"</li>"); 
 
    23} 
 
    24}); 
 
    25
 
    26var listView = new  ListView(); 
 
    27})(jQuery);

3.js 这个样例说明如何使用模型中的集合来存储数据，以及如何将数据的改变绑定到视图。演示效果看这里。

Item 类：模型层的原子（最小）部分。壹个模型是壹个基本的Javascript对象，例如：键值对，以及壹些用于事件响应、数据持久化的帮助函数等。

List 类：壹个条目的集合。基本上是壹些模型对象的数组和壹些帮助函数。

initialize() 正在实例化壹个集合，并且绑定它的添加事件到自己的方法 appendItem。（Backbone不在壹个单独的控制器中提供回调函数用于绑定）。

Save 参考这个以便它能够访问下面的callback范围内的数据。

addItem() 现在独立处理模型与视图。现在视图更新被授予下面的事件监听器 appendItem()。

appendItem() 被集合事件add触发，可视化的处理更新。

 
    01(function($){ 
 
    02
 
    03var Item = Backbone.Model.extend({ 
 
    04defaults: { 
 
    05part1: 'hello',  
 
    06part2: 'world'
 
    07} 
 
    08}); 
 
    09
 
    10
 
    11var List = Backbone.Collection.extend({ 
 
    12model: Item 
 
    13}); 
 
    14
 
    15var ListView = Backbone.View.extend({ 
 
    16el: $('body'), 
 
    17events: { 
 
    18'click button#add': 'addItem'
 
    19}, 
 
    20
 
    21initialize: function(){ 
 
    22_.bindAll(this, 'render',  'addItem',  'appendItem');  // remember: every function that uses 'this' as the current object should be in here 
 
    23
 
    24this.collection = new  List(); 
 
    25this.collection.bind('add', this.appendItem); // collection event binder 
 
    26
 
    27this.counter = 0; 
 
    28this.render(); 
 
    29}, 
 
    30render: function(){ 
 
    31
 
    32var self = this;  
 
    33$(this.el).append("<button id='add'>Add list item</button>"); 
 
    34$(this.el).append("<ul></ul>"); 
 
    35_(this.collection.models).each(function(item){ // in case collection is not empty 
 
    36self.appendItem(item); 
 
    37}, this);  
 
    38}, 
 
    39
 
    40addItem: function(){ 
 
    41this.counter++; 
 
    42var item = new  Item(); 
 
    43item.set({ 
 
    44part2: item.get('part2') + this.counter // modify item defaults 
 
    45}); 
 
    46this.collection.add(item); // add item to collection; view is updated via event 'add' 
 
    47}, 
 
    48
 
    49appendItem: function(item){ 
 
    50$('ul', this.el).append("<li>"+item.get('part1')+" "+item.get('part2')+"</li>"); 
 
    51} 
 
    52}); 
 
    53
 
    54var listView = new  ListView(); 
 
    55})(jQuery);

4.js 这个样例说明如何渲染模型到专门查看的视图。演示效果看这里。

ItemView 类：负责渲染每个独立的条目。

appendItem() 不再负责渲染独立的项目。它现在授予 render() 方法到每个独立的 ItemView 实例。

 
    01(function($){ 
 
    02var Item = Backbone.Model.extend({ 
 
    03defaults: { 
 
    04part1: 'hello',  
 
    05part2: 'world'
 
    06} 
 
    07}); 
 
    08
 
    09var List = Backbone.Collection.extend({ 
 
    10model: Item 
 
    11}); 
 
    12
 
    13var ItemView = Backbone.View.extend({ 
 
    14tagName: 'li',  // name of (orphan) root tag in this.el 
 
    15initialize: function(){ 
 
    16_.bindAll(this, 'render'); // every function that uses 'this' as the current object should be in here 
 
    17}, 
 
    18render: function(){ 
 
    19$(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>'); 
 
    20return this; // for chainable calls, like .render().el  
 
    21} 
 
    22}); 
 
    23
 
    24var ListView = Backbone.View.extend({ 
 
    25el: $('body'), // el attaches to existing element 
 
    26events: { 
 
    27'click button#add': 'addItem'
 
    28}, 
 
    29initialize: function(){ 
 
    30_.bindAll(this, 'render',  'addItem',  'appendItem');  // every function that uses 'this' as the current object should be in here 
 
    31
 
    32this.collection = new  List(); 
 
    33this.collection.bind('add', this.appendItem); // collection event binder 
 
    34
 
    35this.counter = 0; 
 
    36this.render(); 
 
    37}, 
 
    38render: function(){ 
 
    39var self = this;  
 
    40$(this.el).append("<button id='add'>Add list item</button>"); 
 
    41$(this.el).append("<ul></ul>"); 
 
    42_(this.collection.models).each(function(item){ // in case collection is not empty 
 
    43self.appendItem(item); 
 
    44}, this);  
 
    45}, 
 
    46addItem: function(){ 
 
    47this.counter++; 
 
    48var item = new  Item(); 
 
    49item.set({ 
 
    50part2: item.get('part2') + this.counter // modify item defaults 
 
    51}); 
 
    52this.collection.add(item); 
 
    53}, 
 
    54
 
    55appendItem: function(item){ 
 
    56var itemView = new  ItemView({ 
 
    57model: item 
 
    58}); 
 
    59$('ul', this.el).append(itemView.render().el); 
 
    60} 
 
    61}); 
 
    62
 
    63var listView = new  ListView(); 
 
    64})(jQuery);

5.js 本例介绍两个新的模型动作（交换与删除）说明这些动作应该如何在模型的视图中被处理。演示效果看这里。

Backbone.sync：使用匿名函数重载持久化存储。这个属性允许在不抛出异常信息的前提下使用 Model.destroy()。

ItemViews 对于每个条目响应两个点击动作，交换与删除。

initialize() 绑定模型更改与删除到适当的事件。

render() 包含两个额外的span以响应交换与删除事件。

unrender()：让模型从DOM中移除它自己。

swap() 会在内部交换条目的属性，当.set()模型函数被调用，事务更新将会被触发。

remove()：我们使用destroy()方法从集合中移除模型。通常这也会从持久存储中删除记录，但是我们重载了它（参考以上例子）。

 
    01(function($){ 
 
    02
 
    03Backbone.sync = function(method, model, success, error){ 
 
    04success(); 
 
    05} 
 
    06
 
    07var Item = Backbone.Model.extend({ 
 
    08defaults: { 
 
    09part1: 'hello',  
 
    10part2: 'world'
 
    11} 
 
    12}); 
 
    13
 
    14var List = Backbone.Collection.extend({ 
 
    15model: Item 
 
    16}); 
 
    17
 
    18var ItemView = Backbone.View.extend({ 
 
    19tagName: 'li',  // name of tag to be created 
 
    20
 
    21events: { 
 
    22'click span.swap': 'swap',  
 
    23'click span.delete': 'remove'
 
    24}, 
 
    25
 
    26initialize: function(){ 
 
    27_.bindAll(this, 'render',  'unrender',  'swap', 'remove'); // every function that uses 'this' as the current object should be in here 
 
    28
 
    29this.model.bind('change', this.render); 
 
    30this.model.bind('remove', this.unrender); 
 
    31}, 
 
    32
 
    33render: function(){ 
 
    34$(this.el).html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span> &nbsp; &nbsp; <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>'); 
 
    35return this; // for chainable calls, like .render().el  
 
    36}, 
 
    37
 
    38unrender: function(){ 
 
    39$(this.el).remove(); 
 
    40}, 
 
    41
 
    42swap: function(){ 
 
    43var swapped = { 
 
    44part1: this.model.get('part2'), 
 
    45part2: this.model.get('part1') 
 
    46}; 
 
    47this.model.set(swapped); 
 
    48}, 
 
    49
 
    50remove: function(){ 
 
    51this.model.destroy(); 
 
    52} 
 
    53}); 
 
    54
 
    55
 
    56var ListView = Backbone.View.extend({ 
 
    57el: $('body'), // el attaches to existing element 
 
    58events: { 
 
    59'click button#add': 'addItem'
 
    60}, 
 
    61initialize: function(){ 
 
    62_.bindAll(this, 'render',  'addItem',  'appendItem');  // every function that uses 'this' as the current object should be in here 
 
    63
 
    64this.collection = new  List(); 
 
    65this.collection.bind('add', this.appendItem); // collection event binder 
 
    66
 
    67this.counter = 0; 
 
    68this.render(); 
 
    69}, 
 
    70render: function(){ 
 
    71var self = this;  
 
    72$(this.el).append("<button id='add'>Add list item</button>"); 
 
    73$(this.el).append("<ul></ul>"); 
 
    74_(this.collection.models).each(function(item){ // in case collection is not empty 
 
    75self.appendItem(item); 
 
    76}, this);  
 
    77}, 
 
    78addItem: function(){ 
 
    79this.counter++; 
 
    80var item = new  Item(); 
 
    81item.set({ 
 
    82part2: item.get('part2') + this.counter // modify item defaults 
 
    83}); 
 
    84this.collection.add(item); 
 
    85}, 
 
    86appendItem: function(item){ 
 
    87var itemView = new  ItemView({ 
 
    88model: item 
 
    89}); 
 
    90$('ul', this.el).append(itemView.render().el); 
 
    91} 
 
    92}); 
 
    93
 
    94var listView = new  ListView(); 
 
    95})(jQuery);