注：教程请参见这里（本文有很多内容都是从这里翻译的），官方网站在这里；综合例子参见这里。

?

Backbone.js是一个前端MVC框架，model能够绑定键值对和自定义事件，集合具备可枚举方法的富API，视图具备事件处理能力，并且可以通过RESTful的JSON接口和你已有的API通信。

?

View

?

Backbone里的视图就是用来反映数据模型的，可以监听事件并响应，通过利用Underscore.js（这个真是一个牛逼哄哄的东西，自己看），还支持了JavaScript模板技术，把数据和模板分离开。

?

“el”熟悉就是浏览器创建的一个DOM对象的引用，是供backbone渲染的画布，每一个view都会有这样一个属性，如果不存在，backbone就会自己定义一个空的div来作为el，现在把"el"属性定义到div#search_container，看：

?

<div id="search_container"></div>

<script type="text/javascript">
     SearchView = Backbone.View.extend({
        initialize: function(){
            this.render();
        },
        render: function(){
            //Pass variables in using Underscore.js Template
            var variables = { search_label: "My Search" };
            // Compile the template using underscore
            var template = _.template( $("#search_template").html(), variables );
            // Load the compiled HTML into the Backbone "el"
            this.el.html( template );
        },
        events: {
            "click input[type=button]": "doSearch"  
        },
        doSearch: function( event ){
            // Button clicked, you can access the element that was clicked with event.currentTarget
            alert( "Search for " + $("#search_input").val() );
        }
    });
        
    var search_view = new SearchView({ el: $("#search_container") });
</script>

<script type="text/template" id="search_template">
    <!-- Access template variables with <%= %> -->
    <label><%= search_label %></label>
    <input type="text" id="search_input" />
    <input type="button" id="search_button" value="Search" />
</script>

?

上面的代码说明一下：

• render方法就是渲染页面的方法；
• View层的事件绑定也支持了：
  "click input[type=button]": "doSearch"；
• 对于模板的使用，先定义这个模板：
  <script type="text/template" id="search_template">……</script>
  然后模板+数据来生成结果：
  var template = _.template( $("#search_template").html(), variables );
  然后再把结果渲染到画布上：
  this.el.html( template );

Model

?

Model是JavaScript应用的核心，在这里它包括了包含大量逻辑的数据交互、转换、校验，属性的计算和访问控制：

?

Person = Backbone.Model.extend({
        defaults: {
            name: 'Fetus',
            age: 0,
            children: []
        },
        initialize: function(){
            alert("Welcome to this world");
        },
        adopt: function( newChildsName ){
            var children_array = this.get("children");
            children_array.push( newChildsName );
            this.set({ children: children_array });
        }
    });
    
    var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
    person.adopt('John Resig');
    var children = person.get("children"); // ['Ryan', 'John Resig']

?

简单说明一下：

• default是用来定义Model的属性的默认取值的；
• 设值（setter）可以这样写：
  set({ children: children_array })；
• 而取值（getter）则这样写：
  person.get("children")。

再来看看事件绑定的写法（看下面的bind方法的调用）和属性校验的写法（validate方法）：

?

    Person = Backbone.Model.extend({
        // If you return a string from the validate function,
        // Backbone will throw an error
        validate: function( attributes ){
            if( attributes.age < 0 && attributes.name != "Dr Manhatten" ){
                return "You can't be negative years old";
            }
        },
        initialize: function(){
            alert("Welcome to this world");
            this.bind("error", function(model, error){
                // We have received an error, log it, alert it or forget it :)
                alert( error );
            });
        }
    });

?