認識 Backbone（二） : 什麼是 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();

在《認識 Backbone（一） ： 什麼是 Model》一文我已經提到，不管是 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>

參考

http://backbonetutorials.com/what-is-a-view/
http://documentcloud.github.io/underscore/

http://jsfiddle.net/tBS4X/1/