[backbone] Getting Started with Backbone.js

一、简介

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

二、详细介绍

Backbone的四大核心组件：

Model
Collection
View
Controller

Modal

Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.

模型是任何JavaScript应用程序的核心，包含交互式数据以及围绕它的逻辑的很大一部分：转换、验证、计算性能和访问控制。要创建一个模型，需要扩展 Backbone.Model。

　　例子：

最简定义：var Game = Backbone.Model.extend({});

拓展：

    var Game = Backbone.Model.extend({
        initialize: function(){
            alert("Oh hey! Backbone!");
        },
          defaults: {
　　　　　　　// default attribute
            name: '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();

Collection

Collections in Backbone are essentially just a collection of models. Going with our database analogy from earlier, collections are the results of a query where the results consists of a number of records [models].

Backbone中，collection的基本含义就是“许多modal的集合”。如果与我们早期的数据库类比，collection就好比是一个查询的结果集，这个结果集由一系列的记录[modal]组成。

　　例子：

最简定义：表示这个集合的基本modal类型是Game

var 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();

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

View

Backbone 视图可以扩展 Backbone.View 函数并显示模型中存储的数据。
视图的主要目的:渲染数据

————————————————————————————————————

（1）定义视图基准tag

一个视图提供一个由 el 属性定义的 HTML 元素。
该属性可以是由 tagName、className 和 id 属性相组合而构成的，或者是通过其本身的 el 值形成的。
如果 el、tagName、className 和 id 属性为空，那么会默认将一个空的 DIV 分配给 el。

例如：

// 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({
});

（2）视图模型关联

一个视图必须与一个模型相关联。
App.View.Team 视图被绑定到一个 App.Models.Team 模型实例。

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

（3）渲染数据

重写 render() 方法和逻辑来显示 DOM 元素（由 el 属性引用的）中的模型属性。

#更新用户界面样例
App.Views.Team = Backbone.View.extend({
    className : '.team-element',
    tagName : 'div',
    model : new App.Models.Team
    render : 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>");
    }
});

（4）客户端模板

使用 Backbone 客户端模板可以避免在 JavaScript 中嵌入 HTML 代码。
使用模板，模板会封装视图中常见函数；只指定此函数一次即可。
Backbone 在 underscore.js（一个必须的库）中提供一个模板引擎。

#使用 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.Team
    render : function() {
        // Compile the template
        var 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);
    } 
})

（5）综合例子

#定义视图
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');
}

Controller

类似于SpringMVC 中根据不同的URI和参数来路由到不同的方法进行处理

#基础定义
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);
    } 
})

拓展阅读:

1、backbone.js手册

http://documentcloud.github.io/backbone/?cm_mc_uid=04584153933614497181707&cm_mc_sid_50200000=1450061719

http://www.css88.com/doc/backbone/(中文API)

Events
– on
– off
– trigger
– once
– listenTo
– stopListening
– listenToOnce
- Catalog of Built-in Events

Modal
– 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
– previousAttributes


Collection
– 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
– create


Router
– extend
– routes
– constructor / initialize
– route
– navigate

History
– start

Sync
– Backbone.sync
– Backbone.ajax
– Backbone.emulateHTTP
– Backbone.emulateJSON


View
– extend
– constructor / initialize
– el
– $el
– setElement
– attributes
– $ (jQuery)
– render
– remove
– delegateEvents
– undelegateEvents


Utility
– Backbone.noConflict
– Backbone.$

2、underscore.js手册

http://documentcloud.github.io/underscore/

http://www.css88.com/doc/underscore/（中文API）

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

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
- size

arrays
- first
- initial
- last
- rest
- compact
- flatten
- without
- union
- intersection
- difference
- uniq
- zip
- unzip
- object
- indexOf
- lastIndexOf
- sortedIndex
- range

functions
- bind
- bindAll
- partial
- memoize
- delay
- defer
- throttle
- debounce
- once
- after
- wrap
- compose

objects
- 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
- isUndefined


utility
- noConflict
- identity
- times
- random
- mixin
- uniqueId
- escape
- unescape
- result
- template

chaining
- chain
- value

3、backbone的5个小例子

http://arturadib.com/hello-backbonejs/docs/1.html

posted @ 2015-12-14 11:17 Aviva_ye 阅读(247) 评论(0) 编辑收藏举报

Aviva_ye

[backbone] Getting Started with Backbone.js

公告