201507271337_《Backbone之三——Event、Controller(Router)、View、Collection、Model》

一. Event

新建了一個對象，再與事件混合後，對象就能夠用事件方法了。

例如：

1 var obj = {};       //js對象
2 _.extend(obj, Backbone.Events);     //把Backbone.Events擴展到obj對象中。這時這個對象就擁有操做事件的方法了。_是underscore.js的對象，至關於jquery.js中的$
3 
4 obj.bind('data', function(data) { 
5 　　console.log('Receive Data: ' + data); 
6  }); 
7 obj.trigger('data', 'I/'m an Backbone.event');      //打印Receive Data: I'm an Backbone.event
8 obj.unbind('data'); 
9 obj.trigger('data', 'I/'m an Backbone.event'); 

另外，若是事件不少，能夠給事件加上命名空間，例如"change:selection"。屬性事件會先於正常事件觸發。好比：

咱們先監聽了change事件，而後再監聽了change:name屬性事件，但change事件（改變name的值）在觸發時，老是會先觸發屬性事件，而後再觸發change事件。若是改變的不是name的值而是其餘的值，這裏只會觸發change事件，而不會觸發change:name屬性事件。

 

二. Route(Controller)

 

var controller = Backbone.Controller.extend({ 
     routes: { 
         "": "home", 
         "!/comments": "comments", 
         "!/mentions": "mentions", 
         "!/:uid": "profile", 
         "!/:uid/following": "following", 
         "!/:uid/followers": "followers", 
         "!/:uid/status/:id": "status", 
         "!/search/users/:query": "user_search", 
         "!/search/:query": "search" 
     }, 
　　initialize: function(){...}  ,
     home: function(){...} ,
     comments: function() {...} ,
     mentions: function() {...} ,
     profile: function(a) {...} ,
     status: function(a, b) {...} ,
     following: function(a) {...} ,
     followers: function(a) {...} ,
     user_search: function(a) {...} ,
     search: function(a) {...} 
});

 

var custom = new controller();  

 

Backbone.history.start();

... ...

 

 

三. Route(Controller)

view有兩個做用，監聽事件和顯示數據

var view = Backbone.View.extend({ 
     model: User, //這個View的模型
     className: "components cross", 
     template: $("#user-info-template").html(), 
     initialize: function() {    //new view({})就會調用這個初始化方法
　　　　_.bindAll(this, "render"); 
　　　　this.model.bind("change", this.render)    //模型User綁定change事件
     }, 
     render: function() { 
　　　　var a = this.model; 
　　　　$(this.el).html(Mustache.to_html(this.template, a.toJSON()));    //使用了Mustache模板庫，來解析模板，把模型User中的數據，轉換成json，顯示在模板中
           $(this.el).find(".days").html(function() {   //再進行細微的改變
             　　var b = a.get("created_at");     //取到模型User中的created_at的值
             　　return b;
　　　　}); 
　　　　return this ;
　　} 
}); 

在initialize中，一旦User類（模型）觸發了change事件就會執行render方法，繼而顯示新的視圖。
render方法中老是有個約定俗稱的寫法的。this.el是一個DOM對象，render的目的就是把內容填到this.el中。this.el會根據view提供的tagName, className, id屬性建立，若是一個都沒有，就會建立一個空的DIV。
更新完this.el後，咱們還應該return this;這樣才能繼續執行下面的鏈式調用(若是有的話)。
咱們也能夠用$(view.el).remove()或者view.remove()很方便的清空DOM。
View層有一個委託事件的機制。

var view = Backbone.View.extend({ 
     className: "likers-manager", 
　　template: $("#likers-components-template").html(),   //模板HTML
　　events: { 
         "click .btn-more": "loadMore"    
     }, 
　　initialize: function() {    //new view({})，就會調用
         　　_.bindAll(this, "render", "updateTitle", "loadOne", "loadAll", "loadMore");   //調用underscore的bingAll方法
     },
　　render: function() { ... } ,
　　updateTitle: function() { ... } ,
     loadOne: function(a) { ... } ,
　　loadAll: function() { ... } ,
     loadMore: function(a) { ... } 
}); 
在這裏面有個events的鍵值對，格式爲{"event selector": "callback"}，其中click爲事件，.btn-more是基於this.el爲根的選擇器，這樣一旦約定好，當用戶點擊.btn-more的元素時，就會執行loadMore方法

 

 

四. Model

1. Model 用來建立數據，校驗數據，存儲數據到服務器端。Models還能夠綁定事件。好比用戶動做變化觸發 model 的 change 事件，全部展現此model 數據的 views 都會接收到 這個 change 事件，進行重繪。
最簡單的定義以下：

var Game = Backbone.Model.extend({});

稍微複雜一點：

var Game = Backbone.Model.extend({ 
　　initialize: function(){ 
　　　　
     }, 
　　defaults: { 
             name: 'Default title', 
             releaseDate: 2011, 
　　} 
});

 

initialize 至關於構造方法，初始化時調用（new時調用）
簡單實用：

var portal = new Game({ name: "Portal 2", releaseDate: 2011}); 

var release = portal.get('releaseDate'); 

portal.set({ name: "Portal 2 by Valve"});

 

此時數據還都在內存中，須要執行save方法纔會提交到服務器：

portal.save();

 

五. Collection

至關於Model的集合。須要注意的是，定義Collection的時候，必定要指定Model。 下面讓咱們爲這個集合添加一個方法，以下：

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

 

固然，也能夠動態構成集合，以下：

  var GamesCollection = Backbone.Collection.extend({ 

   model : Game, 
   url: '/games' 

}); 

var games = new GamesCollection 
games.fetch();

 

 

這邊的url告訴collection到哪去獲取數據，fetch方法會發出一個異步請求到服務器，從而獲取數據構成集合。（fetch實際上就是調用jquery的ajax方法）

模板解析是Underscore中提供的一個方法。且Underscore是Backbone必須依賴的庫。
模板解析方法能容許咱們在HTML結構中混合嵌入JS代碼，就像在JSP頁面中嵌入JAVA代碼同樣：

 <ul> 
　　<% for(var i = 0; i < len; i++) { %> 
　　<li><%=data[i].title%></li> 
　　<% } %> 
</ul> 

 

經過模板解析，咱們不須要在動態生成HTML結構時，使用拼接字符串的方法，更重要的是，咱們能夠將視圖中的HTML結構獨立管理（例如：不一樣的狀態可能會顯示不一樣的HTML結構，咱們能夠定義多個單獨的模板文件，按需加載和渲染便可）。在Backbone中，你可使用on或off方法綁定和移除自定義事件。在任何地方，你均可以使用trigger方法觸發這些綁定的事件，全部綁定過該事件的方法都會被執行，如：

var model = new Backbone.Model(); 
model.on('custom', function(p1, p2) { 
     }); 

 model.on('custom', function(p1, p2) { 
    }); 
model.trigger('custom', 'value1', 'value2');   //將調用以上綁定的兩個方法
model.off('custom'); 
model.trigger('custom');

// 觸發custom事件，但不會執行任何函數，已經事件中的函數已經在上一步被移除  

 

 

經過重載Backbone.sync方法來適配現有的數據接口