Backbone.js

Backbone.js

注:教程请参见这里(本文有很多内容都是从这里翻译的),官方网站在这里;综合例子参见这里

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

Backbone.js

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

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

分享到:

发表评论

电子邮件地址不会被公开。

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Preview on Feedage: