實例講解JavaScript的Backbone.js框架中的View視圖_基礎知識

Backbone 中的 View 用來反映你 app 中 Model 的模樣。它們會監聽事件並作出相應的反應。
接下來的教學我不會告訴你如何把 Model 和 Collection 綁定到 View 上，而是主要討論 View 是如何使用 javascript 模板庫的，尤其是 Underscore.js's _.template。
這裡我們使用 jQuery 來操作 DOM 元素，當然你也可以使用其他的函式庫，例如 MooTools 或 Sizzle,但是 Backbone 的官方文件推薦我們使用 jQuery。
接下來，我們以搜尋框為例來新建一個 View：

SearchView = Backbone.View.extend({
  initialize: function(){
    alert("Welcome to Backbone!");
  }
});
var search_view = new SearchView();

無論是 Model，View 或 Collection，當被實例化時，initialize() 方法都會被自動觸發。

el 屬性
el 屬性指的是已經在瀏覽器中建立好的 DOM 對象，每個 View 都有一個 el 屬性，如果它未被定義，Backbone 將會自行建立一個空的 div 元素作為 el 屬性。
下面讓我們來為 View 建立一個 el 屬性，並設為 #search_containe。

<div id="search_container"></div>
<script type="text/javascript">
  SearchView = Backbone.View.extend({
    initialize: function(){
      alert("Welcome to Backbone!");
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

此時，View 的 el 屬性指的是 id 為 search_container 的 div 元素。我們此時變綁定了這個 div 元素，那麼任何我們希望觸發的事件都必須在這個 div 元素中。

載入範本
Backbone 是強烈依賴 Underscore.js 的，所以我們可以使用 Underscore.js 中的小型模板。
現在，讓我們新增一個 render() 方法，並且在 initialize() 中呼叫它，這樣當 View 初始化時便會自動觸發 render() 方法。
這個 render() 方法將會透過 jQuery 把模板載入到 View 的 el 屬性中去。

<script type="text/template" id="search_template">
 <label>Search</label>
 <input type="text" id="search_input" />
 <input type="button" id="search_button" value="Search" />
</script>

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

<script type="text/javascript">
  SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      // 通过 Underscore 编译生成模板
      var template = _.template( $("#search_template").html(), {} );
      //讲生成的模板加载到 el 属性中
      this.$el.html( template );
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

新增監聽事件
我們使用 View 的 events 屬性來新增監聽事件，記住監聽事件只能加入 el 屬性的子元素上。現在，我們來為子元素 button 新增一個監聽事件。

<script type="text/template" id="search_template">
 <label>Search</label>
 <input type="text" id="search_input" />
 <input type="button" id="search_button" value="Search" />
</script>

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

<script type="text/javascript">
  SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      var template = _.template( $("#search_template").html(), {} );
      this.$el.html( template );
    },
    events: {
      "click input[type=button]": "doSearch"
    },
    doSearch: function( event ){
      // 当 button 被点击时触发 alert 
      alert( "Search for " + $("#search_input").val() );
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

向模板傳遞參數
模板可以透過 的形式使用從 View 傳來的參數。

<script type="text/template" id="search_template">
  <!-- 通过 <%= %> 形式使用传来的参数 -->
  <label><%= search_label %></label>
  <input type="text" id="search_input" />
  <input type="button" id="search_button" value="Search" />
</script>

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

<script type="text/javascript">
   SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      //定义需要传递的参数
      var variables = { search_label: "My Search" };
      // 通过 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 ){
      alert( "Search for " + $("#search_input").val() );
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

處理DOM事件
視圖很重要的一個功能是幫助我們自動綁定介面事件。回想一下我們以前是如何為介面標籤綁定事件的？可能就像這樣：

<p> 
  <input type="button" value="Create" id="create" /> 
  <input type="button" value="Read" id="read" /> 
  <input type="button" value="Update" id="update" /> 
  <input type="button" value="Delete" id="delete" /> 
</p> 
<script type="text/javascript"> 
  function createData() { 
    // todo 
  } 
  function readData() { 
    // todo 
  } 
  function updateData() { 
    // todo 
  } 
  function deleteData() { 
    // todo 
  } 
 
  $('#create').on('click', createData); 
  $('#read').on('click', readData); 
  $('#update').on('click', updateData); 
  $('#delete').on('click', deleteData); 
</script> 

這是一個典型的透過jQuery綁定DOM事件的例子，如果你正在開發或曾經開發過一些複雜的應用，你可能嘗試過透過某種方式將這些程式碼更好的組織起來，以便使它們看起來結構更清晰，也更容易維護。
Backbone的視圖物件為我們提供了事件的自動綁定機制，用於更好地維護DOM和事件間的關係，來看看下面的範例：

<p id="view"> 
  <input type="button" value="Create" id="create" /> 
  <input type="button" value="Read" id="read" /> 
  <input type="button" value="Update" id="update" /> 
  <input type="button" value="Delete" id="delete" /> 
</p> 
<script type="text/javascript"> 
  var MyView = Backbone.View.extend({ 
    el : '#view', 
    events : { 
      'click #create' : 'createData', 
      'click #read' : 'readData', 
      'click #update' : 'updateData', 
      'click #delete' : 'deleteData' 
    }, 
    createData : function() { 
      // todo 
    }, 
    readData : function() { 
      // todo 
    }, 
    updateData : function() { 
      // todo 
    }, 
    deleteData : function() { 
      // todo 
    } 
  }); 
  var view = new MyView(); 
</script> 

在這個範例中，我們將4個按鈕放在一個id為view的標籤中，並將這個標籤與視圖類別MyView進行了關聯。
在定義視圖類別時，我們聲明了一個events屬性，它表示視圖中的使用者事件列表，描述方式如下：

事件名称 选择器 : 事件处理函数

事件名稱可以是DOM物件支援的任何事件，選擇器可以是jQuery或Zepto支援的任意選擇器字串（包括標籤選擇器、類別選擇器、id選擇器等），而事件處理函數應該是已經定義在視圖類別本身的方法名稱。
視圖物件會自動解析events清單中的描述，即使用jQuery或Zepto取得選擇器所描述的DOM對象，並將事件處理函數綁定至事件名稱。這些操作都會在視圖類別被實例化時自動完成，我們可以更關心視圖類別本身的結構，而不是刻意地去考慮如何綁定事件。

你可能在擔心另一個問題：如果視圖的DOM結構是動態產生的，Backbone是否提供了相應的方法用於動態綁定和解除事件？
其實你並不需要關心這個問題，因為events中的事件是透過delegate()方法綁定到視圖物件的el元素上，而並非是選擇器所描述的元素。因此視圖內的結構無論如何變化，events中的事件都是有效的。
（如果你對jQu​​ery比較熟悉，可能了解它所提供的delegate()方法。該方法實際上將事件綁定在父層元素，然後在事件冒泡過程中，透過檢查目標子元素來觸發事件。）
視圖物件透過delegate()方法綁定事件，表示我們不需要關心視圖結構變化對事件產生的影響，同時也說明events中選擇器所對應的元素必須處於視圖的el元素之內，否則綁定的事件是無法生效的。

儘管如此，有些情況下可能我們仍然需要手動綁定和解除事件，視圖對象提供了delegateEvents()和undelegateEvents()方法用於動態綁定和解除events事件列表，你可以通過查看API文檔來了解它們。
渲染視圖與資料
視圖主要用於介面事件的綁定和資料渲染，然而視圖物件僅僅提供了一個和渲染相關的方法render()，並且它是一個沒有任何邏輯、也沒有任何地方引用到的空方法，我們需要重載它來實現自己的渲染邏輯。
視圖中可能包含許多介面邏輯​​，這裡建議所有的視圖子類別都重載render()方法，並將它作為最終渲染的入口方法。在團隊開發中，嚴格遵守規範編碼可以幫助別人更好地理解和維護你的程式碼。