這篇文章主要介紹了實(shí)例講解JavaScript的Backbone.js框架中的View視圖,在瀏覽器端js框架backbone中我們用view來綁定和處理DOM事件,需要的朋友可以參考下

Backbone 中的 View 用來反映你 app 中 Model 的模樣。它們會(huì)監(jiān)聽事件并作出相應(yīng)的反應(yīng)。

接下來的教程我不會(huì)告訴你如何把 Model 和 Collection 綁定到 View 上，而是主要討論 View 是如何使用 javascript 模板庫的，尤其是 Underscore.js's _.template。

這里我們使用 jQuery 來操作 DOM 元素，當(dāng)然你也可以使用其他的庫，例如 MooTools 或者 Sizzle,但是 Backbone 的官方文檔推薦我們使用 jQuery。

接下來，我們以搜索框?yàn)槔齺硇陆ㄒ粋€(gè) View：

SearchView = Backbone.View.extend({

  initialize: function(){

    alert("Welcome to Backbone!");

  }

});

var search_view = new SearchView();

無論是 Model，View 還是 Collection，當(dāng)被實(shí)例化時(shí)，initialize() 方法都會(huì)被自動(dòng)觸發(fā)。

el 屬性

el 屬性指的是已經(jīng)在瀏覽器中創(chuàng)建好的 DOM 對象，每個(gè) View 都有一個(gè) el 屬性，如果它未被定義，Backbone 將會(huì)自己創(chuàng)建一個(gè)空的 div 元素作為 el 屬性。

下面讓我們來為 View 創(chuàng)建一個(gè) el 屬性，并設(shè)為 #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>

此時(shí)，View 的 el 屬性指的是 id 為 search_container 的 div 元素。我們此時(shí)變綁定了這個(gè) div 元素，那么任何我們希望觸發(fā)的事件都必須在這個(gè) div 元素中。

加載模板

Backbone 是強(qiáng)依賴于 Underscore.js 的，所以我們可以使用 Underscore.js 中的小型模板。

現(xiàn)在，讓我們添加一個(gè) render() 方法，并且在 initialize() 中調(diào)用它，這樣當(dāng) View 初始化時(shí)便會(huì)自動(dòng)觸發(fā) render() 方法。

這個(gè) render() 方法將會(huì)通過 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>

添加監(jiān)聽事件

我們使用 View 的 events 屬性添加監(jiān)聽事件，記住監(jiān)聽事件只能添加到 el 屬性的子元素上?，F(xiàn)在，我們來給子元素 button 添加一個(gè)監(jiān)聽事件。

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

      // 當(dāng) button 被點(diǎn)擊時(shí)觸發(fā) alert 

      alert( "Search for " + $("#search_input").val() );

    }

  });

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

</script>

向模板中傳遞參數(shù)

模板可以通過 <%= %> 的形式使用從 View 中傳來的參數(shù)。

<script type="text/template" id="search_template">

  <!-- 通過 <%= %> 形式使用傳來的參數(shù) -->

  <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(){

      //定義需要傳遞的參數(shù)

      var variables = { search_label: "My Search" };

      // 通過 Underscore 生成模板，同時(shí)傳遞參數(shù)

      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事件

視圖很重要的一個(gè)特性是幫助我們自動(dòng)綁定界面事件?；叵胍幌挛覀円郧笆侨绾螢榻缑鏄?biāo)簽綁定事件的？可能就像這樣：

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

這是一個(gè)典型的通過jQuery綁定DOM事件的例子，如果你正在開發(fā)或曾經(jīng)開發(fā)過一些復(fù)雜的應(yīng)用，你可能嘗試過通過某種方式將這些代碼更好的組織起來，以便使它們看起來結(jié)構(gòu)更加清晰，更易維護(hù)。

Backbone的視圖對象為我們提供了事件的自動(dòng)綁定機(jī)制，用于更好地維護(hù)DOM和事件間的關(guān)系，來看看下面的例子：

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

在這個(gè)例子中，我們將4個(gè)按鈕放在一個(gè)id為view的標(biāo)簽中，并將這個(gè)標(biāo)簽與視圖類MyView進(jìn)行了關(guān)聯(lián)。

在定義視圖類時(shí)，我們聲明了一個(gè)events屬性，它表示視圖中的用戶事件列表，描述方式如下：

事件名稱 選擇器 : 事件處理函數(shù)

事件名稱可以是DOM對象支持的任何事件，選擇器可以是jQuery或Zepto支持的任意選擇器字符串（包括標(biāo)簽選擇器、類選擇器、id選擇器等），而事件處理函數(shù)應(yīng)該是已經(jīng)定義在視圖類本身的方法名稱。

視圖對象會(huì)自動(dòng)解析events列表中的描述，即使用jQuery或Zepto獲取選擇器描述的DOM對象，并將事件處理函數(shù)綁定到事件名稱中。這些操作都會(huì)在視圖類被實(shí)例化時(shí)自動(dòng)完成，我們可以更關(guān)心視圖類本身的結(jié)構(gòu)，而不是刻意地去考慮如何綁定事件。

你可能在擔(dān)心另外一個(gè)問題：如果視圖的DOM結(jié)構(gòu)是動(dòng)態(tài)生成的，Backbone是否提供了相應(yīng)的方法用于動(dòng)態(tài)綁定和解除事件？

其實(shí)你并不需要關(guān)心這個(gè)問題，因?yàn)閑vents中的事件是通過delegate()方法綁定到視圖對象的el元素上，而并非是選擇器所描述的元素。因此視圖內(nèi)的結(jié)構(gòu)無論如何變化，events中的事件都是有效的。

（如果你對jQuery比較熟悉，可能了解它所提供的delegate()方法。該方法實(shí)際上將事件綁定在父層元素，然后在事件冒泡過程中，通過檢查目標(biāo)子元素來觸發(fā)事件。）

視圖對象通過delegate()方法綁定事件，意味著我們不需要關(guān)心視圖結(jié)構(gòu)變化對事件產(chǎn)生的影響，同時(shí)也說明events中選擇器所對應(yīng)的元素必須處于視圖的el元素之內(nèi)，否則綁定的事件是無法生效的。

盡管如此，有些情況下可能我們?nèi)匀恍枰謩?dòng)綁定和解除事件，視圖對象提供了delegateEvents()和undelegateEvents()方法用于動(dòng)態(tài)綁定和解除events事件列表，你可以通過查看API文檔來了解它們。 

渲染視圖和數(shù)據(jù)

視圖主要用于界面事件的綁定和數(shù)據(jù)渲染，然而視圖對象僅僅提供了一個(gè)和渲染相關(guān)的方法render()，并且它是一個(gè)沒有任何邏輯、也沒有任何地方引用到的空方法，我們需要重載它來實(shí)現(xiàn)自己的渲染邏輯。

視圖中可能包含許多界面邏輯，這里建議所有的視圖子類都重載render()方法，并將它作為最終渲染的入口方法。在團(tuán)隊(duì)開發(fā)中，嚴(yán)格按照規(guī)范編碼可以幫助別人更好地理解和維護(hù)你的代碼。