Backbone 是一个 JavaScript MVC 框架，它属于轻量级框架，且易于学习掌握。模型、视图、集合和路由器从不同的层面划分了应用程序，并负责处理几种特定事件。处理 Ajax 应用程序或者 SPI 应用程序时，Backbone 可能是最好的解决方案。

最简定义：var Game = Backbone.Model.extend({});拓展：var Game = Backbone.Model.extend({initialize: function(){alert("Oh hey! Backbone!");},defaults: {　　　　　　　// default attributename: 'Default title',releaseDate: 2011,}});#initialize will be fired when an object is instantiated.
#initialize 部分当Game对象实例化的时候将会被触发#创建实例化对象#必须创建一个实例才能在应用程序中使用特定模型
var portal = new Game({ name: "Portal 2", releaseDate: 2011});#获取属性值
var release = portal.get('releaseDate');#设置属性值
portal.set({ name: "Portal 2 by Valve"});#当调用set方法后，仅仅只是改变了内存中的值，如果想要在服务器中持久化值，需要调用save()方法。发送的是POST请求。
portal.save();

最简定义：表示这个集合的基本modal类型是Gamevar GamesCollection = Backbone.Collection.extend({model : Game,});拓展定义：通过新增的方法返回特定的集合数据
add a method that returns only specific games.var GamesCollection = Backbone.Collection.extend({model : Game,old : function() {return this.filter(function(game) { return game.get('releaseDate') < 2009; });}
});也可以直接操作一个集合的内容
var games = new GamesCollection();
games.get(0);//或者  games.at(0);
使用 add()/remove() 方法可以将一个模型添加和移动到集合中。

　　App.Collections.Teams = Backbone.Collection.extend({
　　　　model : App.Models.Team
　　});

　　var teams = new App.Collections.Teams();
　　teams.add(team1);
　　teams.add(new App.Models.Team({name : "Team B"}));
　　teams.add(new App.Models.Team());
　　teams.remove(team1);

　　console.log(teams.length) // prints 2
　　console.log(teams.fetch());//取得集合包含的模型阵列

最后，可以动态地填充集合
var GamesCollection = Backbone.Collection.extend({model : Game,url: '/games'
});var games = new GamesCollection();
games.fetch();

这也是常用的获取集合数据的方法

// In the following view, el value is 'UL.team-element'
App.Views.Teams = Backbone.View.extend({el : 'UL.team-list'
});// In the following view, el value is 'div.team-element'
App.Views.Team = Backbone.View.extend({className : '.team-element',tagName : 'div'
});// In the following view, el value is 'div'
App.Views.Team = Backbone.View.extend({
});

App.Views.Team = Backbone.View.extend({el : 'UL.team-list',...model : new App.Models.Team
});

#更新用户界面样例
App.Views.Team = Backbone.View.extend({className : '.team-element',tagName : 'div',model : new App.Models.Teamrender : function() {// Render the 'name' attribute of the model associated// inside the DOM element referred by 'el'$(this.el).html("<span>" + this.model.get("name") + "</span>");}
});

#使用 underscore.js HTML 模板
<script id="teamTemplate" type="text/template"><%= name %>
</script>
#使用 _.template() 函数的视图
App.Views.Team = Backbone.View.extend({className : '.team-element',tagName : 'div',model : new App.Models.Teamrender : function() {// Compile the templatevar compiledTemplate = _.template($('#teamTemplate').html());// Model attributes loaded into the template. Template is// appended to the DOM element referred by the el attribute$(this.el).html(compiledTemplate(this.model.toJSON()));}
});#将 render() 方法绑定到模型变更事件 bind("change",function(){})
#当模型发生更改时，会自动触发 render() 方法，从而节省数行代码。
App.Views.Team = Backbone.View.extend({model : new App.Models.Team,initialize : function() {this.model.bind("change", this.render, this);}
})

#定义视图
var GameView= Backbone.View.extend({tagName : "div",className: "game",render : function() {//dom way//这里的this.el 相当于是  class = game的那个div节点this.el.innerHTML = this.model.get('name');//jQuery way$(this.el).html(this.model.get('name'));}
});#通过dom节点监听事件
events: {'click .name': 'handleClick'
},
handleClick: function(){alert('In the name of science... you monster');
}

#基础定义
var Hashbangs = Backbone.Controller.extend({routes: {
　　　　"/":                 "root",
　　　　"/games":        "games",},root: function() {
　　　　// Prep the home page and render stuff
　　},games: function() {
　　　　// Re-render views to show a collection of books
　　},
});

#或者var App.Routers.Main = Backbone.Router.extend({

　　// Hash maps for routes
　　routes : {
　　　　"" : "index",
　　　　"/teams" : "getTeams",
　　　　"/teams/:country" : "getTeamsCountry",
　　　　"/teams/:country/:name : "getTeam"
　　　　"*error" : "fourOfour"
　　},

　　index: function(){
　　　　// Homepage
　　},

　　getTeams: function() {
　　　　// List all teams
　　},
　　getTeamsCountry: function(country) {
　　　　// Get list of teams for specific country
　　},
　　getTeam: function(country, name) {
　　　　// Get the teams for a specific country and with a specific name
　　},
　　fourOfour: function(error) {
　　　　// 404 page
　　}
});

http://www.example.com -> 触发 index()
http://www.example.com/#/teams -> 触发 getTeams()
http://www.example.com/#/teams/country1 -> 触发 getTeamsCountry() 传递 country1 作为参数
http://www.example.com/#/teams/country1/team1 -> 触发 getTeamCountry() 传递 country1 和 team1 作为参数
http://www.example.com/#/something 触发 fourOfour() -> 以作 * （星号）使用。

注意：

当实例化路由器（控制器）时，会生成 Backbone.history 对象（控制浏览器前进或后退的对象）；
它将自动引用 Backbone.History 函数。
Backbone.History 负责匹配路由和 router 对象中定义的活动。
start() 方法触发后，将创建 Backbone.history 的 fragment 属性。它包含散列片段的值。该序列在根据状态次序管理浏览器历史方面十分有用。用户如果想要返回前一状态，单击浏览器的返回按钮。

#因此，为避免扰乱后退按钮，请执行如下的代码：
var ApplicationController = new Controller();
Backbone.history.start();

　　var router = new App.Routers.Main();
　　Backbone.history.start({pushState : true});

（1）url
定义了使用 Ajax GET 请求从服务器取出 JSON 数据的位置
teams.url = '/getTeams';
teams.fetch(); //Ajax GET Request to '/getTeams'
（2）存取 save() / fetch()Backbone 的一个重要特性是易于通过 Ajax 交互与服务器进行通信。
在模型上调用一个 save() 方法会通过 REST JSON API 异步将当前状态保存到服务器。barca.save();save()函数将在后台委托给 Backbone.sync，这是负责发出 RESTful 请求的组件，默认使用 jQuery 函数 $.ajax()。
由于调用了 REST 风格架构，每个 Create、Read、Update 或 Delete (CRUD) 活动均会与各种不同类型的 HTTP 请求（POST、GET、PUT 和 DELETE）相关联。
首先保存模型对象，使用一个 POST 请求，创建一个标识符 ID，其后，尝试发送对象到服务器，使用一个 PUT 请求。当需要从服务器检索一个模型时，请求一个 Read 活动并使用一个 Ajax GET 请求。这类请求使用 fetch() 方法。
Fetch() 方法属于异步调用，因此，在等待服务器响应时，应用程序不会中止。要确定导入模型数据或者从中取出模型数据的服务器的位置：A.如果模型属于一个 collection，那么集合对象的 url 属性将是该位置的基础，并且该模型 ID（不是 cid）会被附加以构成完整的 URL。B.如果模型不是在一个集合中，那么该模型的 urlroot 属性被用作该位置的基础如：
var teamNew = new App.Models.Team({urlRoot : '/specialTeams'
});
teamNew.save(); // returns model's ID equal to '222'
teamNew.fetch(); // Ajax request to '/specialTeams/222'
（3）parse()
要操作来自服务器的原始数据，可以使用集合的 parse() 方法。
App.Collections.Teams = Backbone.Collection.extend({model : App.Models.Team,parse : function(data) {// 'data' contains the raw JSON object
        console.log(data);}
});（4）验证 validate() 需要重写 validate() 方法（在调用 set() 方法时触发）来包含模型的有效逻辑。
传递给该函数的惟一参数是一个 JavaScript 对象，该对象包含了 set()方法更新的属性，以便验证那些属性的条件。
如果从 validate() 方法中没有返回任何内容，那么验证成功。如果返回一个错误消息，那么验证失败，将无法执行 set() 方法。App.Models.Team = Backbone.Model.extend({validate : function(attributes){if (!!attributes && attributes.name === "teamX") {// Error message returned if the value of the "name" // attribute is equal to "teamX"return "Error!";}}
}（5）获取HTML模版代码HTML代码
<script id="teamTemplate" type="text/template"><%= name %>
</script>

获取方法
_.template($('#teamTemplate').html())（6）绑定模型事件在 Backbone 0.5.2 之前的版本中，必须使用 underscore.js 中的 _.bindAll() 函数0.5.2 之前的版本
App.Views.Team = Backbone.View.extend({initialize : function() {_.bindAll(this, "render");//注意这里的bind只有两个参数this.model.bind("change", this.render);}
})0.5.2之后的版本
App.Views.Team = Backbone.View.extend({model : new App.Models.Team,initialize : function() {//注意这里的bind有三个参数this.model.bind("change", this.render, this);}
})

Events
– on
– off
– trigger
– once
– listenTo
– stopListening
– listenToOnce
- Catalog of Built-in EventsModal
– extend
– constructor / initialize
– get
– set
– escape
– has
– unset
– clear
– id
– idAttribute
– cid
– attributes
– changed
– defaults
– toJSON
– sync
– fetch
– save
– destroy
– Underscore Methods (6)
– validate
– validationError
– isValid
– url
– urlRoot
– parse
– clone
– isNew
– hasChanged
– changedAttributes
– previous
– previousAttributesCollection
– extend
– model
– constructor / initialize
– models
– toJSON
– sync
– Underscore Methods (28)
– add
– remove
– reset
– set
– get
– at
– push
– pop
– unshift
– shift
– slice
– length
– comparator
– sort
– pluck
– where
– findWhere
– url
– parse
– clone
– fetch
– createRouter
– extend
– routes
– constructor / initialize
– route
– navigateHistory
– startSync
– Backbone.sync
– Backbone.ajax
– Backbone.emulateHTTP
– Backbone.emulateJSONView
– extend
– constructor / initialize
– el
– $el
– setElement
– attributes
– $ (jQuery)
– render
– remove
– delegateEvents
– undelegateEventsUtility
– Backbone.noConflict
– Backbone.$

针对如下的类型封装了很多操作的方法
调用方法时，在方法前加上  " _.  "
比如：

Collection中
each 为 _.each(list, iterator, [context])

_.each([1, 2, 3], alert);
=> alerts each number in turn...
_.each({one : 1, two : 2, three : 3}, alert);
=> alerts each number value in turn...

map 为 _.map(list, iterator, [context])

_.map([1, 2, 3], function(num){ return num * 3; });
=> [3, 6, 9]
_.map({one : 1, two : 2, three : 3}, function(num, key){ return num * 3; });
=> [3, 6, 9]

find 为 _.find(list, iterator, [context]) 

var even = _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
=> 2

filter 为 _.filter(list, iterator, [context])

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
=> [2, 4, 6]

Functions中bind 为 _.bind(function, object, [*arguments]) 

var func = function(greeting){ return greeting + ': ' + this.name };
func = _.bind(func, {name : 'moe'}, 'hi');
func();
=> 'hi: moe'

bindAll 为 _.bindAll(object, *methodNames) 

var buttonView = {label   : 'underscore',onClick : function(){ alert('clicked: ' + this.label); },onHover : function(){ console.log('hovering: ' + this.label); }
};
_.bindAll(buttonView, 'onClick', 'onHover');
// When the button is clicked, this.label will have the correct value.
jQuery('#underscore_button').bind('click', buttonView.onClick);

delay 为 _.delay(function, wait, [*arguments]) 

var log = _.bind(console.log, console);
_.delay(log, 1000, 'logged later');
=> 'logged later' // Appears after one second.

#以下是比较全面的方法
collections
- each
- map
- reduce
- reduceRight
- find
- filter
- where
- findWhere
- reject
- every
- some
- contains
- invoke
- pluck
- max
- min
- sortBy
- groupBy
- countBy
- shuffle
- toArray
- sizearrays
- first
- initial
- last
- rest
- compact
- flatten
- without
- union
- intersection
- difference
- uniq
- zip
- unzip
- object
- indexOf
- lastIndexOf
- sortedIndex
- rangefunctions
- bind
- bindAll
- partial
- memoize
- delay
- defer
- throttle
- debounce
- once
- after
- wrap
- composeobjects
- keys
- values
- pairs
- invert
- functions
- extend
- pick
- omit
- defaults
- clone
- tap
- has
- isEqual
- isEmpty
- isElement
- isArray
- isObject
- isArguments
- isFunction
- isString
- isNumber
- isFinite
- isBoolean
- isDate
- isRegExp
- isNaN
- isNull
- isUndefinedutility
- noConflict
- identity
- times
- random
- mixin
- uniqueId
- escape
- unescape
- result
- templatechaining
- chain
- value