Backbone.js – 四火的唠叨

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

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 );  
        });  
    }  
});

Router

Router 以前是被 backbone 称为 Controller 的，它使用 URL 的 hash 来做地址映射。主要的写法有 “*” 和 “:” 两种：

var AppRouter = Backbone.Router.extend({  
    routes: {  
        "/posts/:id/:action": "getPost",  
        "*actions": "defaultRoute" // Backbone will try match the route above first
    },  
    getPost: function( id, action ) {  
        // Note the variable in the route definition being passed in here
        alert( "Get post number " + id );     
    },  
    defaultRoute: function( actions ){  
        alert( actions );   
    }  
});  
// Instantiate the router
var app_router = new AppRouter;  
// Start Backbone history a neccesary step for bookmarkable URL's
Backbone.history.start();

稍微说明一下：

如果 URL 为 http://example.com/#/posts/121/delete 的话，那么：
“/posts/:id/:action” 匹配上了，那么 id=”121″，action=”delete” 这样的参数传到 getPost 方法里；
如果没匹配上，”121/delete” 将作为参数传到 defaultRoute 方法里。
在创建好所有的 router 之后，一定要调用一下 Backbone.history.start() 方法来 route 你的 URL。

Collection

Collection 其实就是一组 Model 的有序集合。

var Song = Backbone.Model.extend({  
    defaults: {  
        name: "Not specified",  
        artist: "Not specified"
    },  
    initialize: function(){  
        console.log("Music is the answer");  
    }  
});  

var Album = Backbone.Collection.extend({  
    model: Song  
});  

var song1 = new Song({ name: "How Bizarre", artist: "OMC" });  
var song2 = new Song({ name: "Sexual Healing", artist: "Marvin Gaye" });  
var song3 = new Song({ name: "Talk It Over In Bed", artist: "OMC" });  

var myAlbum = new Album([ song1, song2, song3]);  
console.log( myAlbum.models ); // [song1, song2, song3]

说明一下：

对象集合怎么放进去（比如数组形式），它就怎么管理：
var myAlbum = new Album([ song1, song2, song3]);

文章未经特殊标明皆为本人原创，未经许可不得用于任何商业用途，转载请保持完整性并注明来源链接《四火的唠叨》

Leave a Reply Cancel reply