利用BackboneJS更好组织jQuery应用的架构（三）

屏幕录像
玩转Backbone.js
http://tekpub.com/products/backbone
这是Rob Conery对学习如何使用Backbone.js构建一个SPA的过程的遍历。循着这条历程，他展示了许许多多通常都会遇到的陷阱和问题，以及如何解决它们。在这个系列结束的时候我也做了下展示，来介绍我的MarionetteJS应用程序框架。
BackboneRail.com
http://backbonerails.com/
Brian Mann有一系列的Backbone.js屏幕录像，主要涵盖了大型Backbone.js应用程序的伸缩性及管理。他还有大量的免费作品和收费作品，涵盖了从SPA历史，到构建可伸缩系统以及更多的所有东西。
Backbone.js上手
http://pragprog.com/screencasts/v-dback/hands-on-backbone-js
我的学习Backbone.js的系列屏幕录像。在这里面使用的Backbone.js版本已经过时了，但是其核心概念里面都有，而且这些内容仍然有用。如果你是一个靠视觉的学习者并且想要跟着示范一步一步做，那这就很适合你。
应用程序框架
来自Backbone.js社区最棒的贡献之一就属应用程序框架了。有大量这样的框架提供用于构建更大型的伸缩式应用程序框架的附加特性和功能。这些大多数都是很流行的，而我则强烈建议你看看它们，如果你计划在使用其实现几个简单的对象之外还要用Backbone.js做任何其它更多事情的话。
MarionetteJS
http://marionettejs.com/
原来以Backbone.Marionette而闻名，MarionetteJS是一个面向Backbone.js复合应用程序架构，也在我自己的数十个客户端应用程序工作中被使用，还被全世界的开发者用来构建了数以百计的其它系统。它提供了一个特殊化的View抽象层（ItemView，CollectionView， CompositeView），提供了使用一个Layout来构筑视图内部的能力，一个应用程序引导器，一个简单的模块系统，已经更多的东西。
LayoutManager
http://layoutmanager.org/
LayoutManager用于在Backbone中组装布局和视图的逻辑基础设施。Tim Branyen —— 他是Backbone.js项目的骨干贡献人员——构建了一个基于约定来快速创建应用程序布局和内部视图架构的框架。它在浏览器和服务器端的NodeJS中都能工作，在其使用场景中提供了许多灵活性。
ChaplinJS
http://chaplinjs.org/
ChaplinJS提供了基于Backbone构建Javascript应用程序的架构指引。ChaplinJS通过提供一种其特性在设计模式和最佳实践中都得到了良好验证的轻量且灵活的架构来解决Backbone的局限。它是通过在其实现中使用Coffeescript来做到的，而它仍然可以在Javascript中被使用。Chaplin的控制器和路由器管理值得一看究竟，即使你现在正使用着另外一个应用程序框架。
Thorax
http://thoraxjs.org/
Thorax是一个信心满满，久经考验的用于构建大型伸缩式web应用程序的Backbone+Handlebar框架。 Thorax的生命开始于Wal-Mart实验室，用于支持这个实验室在移动领域的尝试。其同Handlerbar在模板渲染上的紧密集成提供了一种风格独特的构建Backbone.js应用程序的方式，看上去比大多数Backbone.js框架更像是真正的MVC。
Aura
http://addyosmani.github.io/aura/
Aura是一个基于Backbone.js解耦的，事件驱动的架构，用于开发基于小组件的应用程序。一开始只是一个Backbone的应用程序框架，由于其也有同其它MV*库协同工作的能力，Aura开启了其新的生命。Aura采用基于小组件开发的方式，而其应用程序就使用那些组件组装而成。它集成了大量Javascript的社区知识，还有多年的大型可伸缩Javascript系统的扩展经验。
其它插件和附件
还有数以百计的涵盖了从内嵌模型架构，到特殊的服务器API的其它插件可供使用。想要得到更多Backbone.js社区所提供的东西的完整列表，请访问Backbone.js的关于其扩展，插件和资源的维基页面。
Derick Bailey
列表1: 点击保存按钮并将数据传送到服务器.
$("#save").click(function(e){
var formData = {
name: $("#name").val(),
photo: $("#photo").val(),
email: $("#email").val(),
phone: $("#phone").val(),
notes: $("#notes").val()
};

$.ajax({
url: "/contacts",
type: "POST",
dataType: "JSON",
data: formData,
success: function(){
updateList(formData);
clearForm();
}
});
});


列表2: 定义了一个列出联系人的视图

var ContactListView = Backbone.View.extend({
template: "#contact-list-template",

// tell this view it is rendering a list
tagName: "ul",

// render the list of contacts by iterating
// over the view's collection, and rendering
// for each of the models in the collection.
// add the results to an array and stuff the
// array in to the view's $el when it's done.
render: function(){
var results = [];

var compiledTemplate = _.template(this.template);

this.collection.each(function(contact){
var html = compiledTemplate(contact.toJSON());
results.push(html);
});

this.$el.html(results);

return this;
}

});
列表3: 显示联系人列表视图
var contacts = new ContactCollection([
{
id: 1,
name: "Derick Bailey",
email: "derick@example.com",
url: "http://mutedsolutions.com",
notes: "just some guy"
}, {
id: 2,
name: "Ian Bailey",
email: "ian@example.com",
url: "",
notes: "the most awesome little man, ever"
}, {
id: 3,
name: "Ashelia Bailey",
email: "ashe@example.com",
url: "http://example.com/ashe",
notes: "the best ballerina in the universe"
}
]);

var contactList = new ContactListView({
collection: contacts
});

$("#contact-list").html(contactList.render().$el);
列表4: 新增一个联系人时，显示一个视图.
var ContactListView = Backbone.View.extend({

// the initialize method executes just
// after the view is instantiated
initialize: function(){
this.listenTo(this.collection, "add", this.contactAdded);
},

// handle a contact being added
contactAdded: function(contact){
this.render();
},

// ... existing methods and config
});

本文转自：开源中国社区 [http://www.oschina.net]
本文标题：利用 BackboneJS 更好的组织 jQuery 应用的架构
本文地址：http://www.oschina.net/translate/structuring-jquery-with-backbone-js?lang=chs&page=5#
参与翻译：LeoXu, super0555, yale8848, ley, 竟悟, tnjin, carrottee
英文原文：Structuring jQuery with Backbone.js

原文：http://www.linuxeden.com/html/news/20131112/145443_3.html