Backbone View入門

航空母艦發表於2015-08-14
View

Backbone 是一個 JavaScript 框架，可用於建立模型-檢視-控制器 (model-view-controller, MVC) 類應用程式和單頁介面。它試圖讓 JavaScript 應用程式更清晰結構化，所涉及到的概念有  View, Event, Model, Collection 和 Router，所以新手剛開始接觸 Backbone 反而會顯得零亂了。再加上網上找來的一些起步教程一上來就把 Event, Model, Collection 或是 Router 攬上了。其實新手最想要一個最簡單的真相，因此第一個例子只需用到 View，其他的玩藝暫且擱置。

Backbone 強依賴於 Underscore，jQuery 是可選的，不過為操作 DOM 方便一般都會引用到 jQuery。

最簡單的例子，分兩步走：

1. Backbone.View.extend(obj) 建立一個 View 型別
2. 建立上一步得到的 View 的例項，例項化時將會呼叫前一步 obj.initialize() 方法

<!DOCTYPE html>
<html>
     <head>
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
         <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
         <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
     </head>
     <body>
         <div id="container">Loading...</div>
     </body>
 </html>
  
 <script>
     var AppView = Backbone.View.extend({
         el: '#container',
         initialize: function(options) {
                 this.render();
         },
         render: function() {
                 this.$el.html("Hello World");
         }
     });
  
    //上面等於是建立了 AppView 類，還需例項化才行
    setTimeout(function(){
      var appView = new AppView();
    }, 1000);
  
 </script>

執行上面的程式碼，會發現 Loading... 在一秒後被替換成了 Hello World。走通。

 

有了上頭的真切體驗，我們才可以再進一步，使用行間模板和頁面中宣告的模板，模板就會觸碰到值的填充，至此隱約也會感覺到 Model 在向我們招手了。

我們在構造 AppView 時可以傳入以上的屬性，比如傳入 el 屬性，就寫成

var appView = new AppView({el: $('#container')});

 這樣前面的 AppView 內就可以不用宣告 el 屬性了。你也可以同樣的方式傳入 model, id 等屬性，屬性宣告在 View 的定義比較清晰，倘若要 View 的公用性就可在構造時傳入屬性，這是後話。

 

Backbone 的物件在初始化之後首先被執行的是 initialize 方法，初始化方法中可能要呼叫父類的初始化，則在  initialize 方法中頭行加上

this.constructor.__super__.initialize.apply(this);

這在要建立自己更深層次的類關係時會有用到，特別是非預設構造。

 

 

相關文章