View的學習

本章會通過一個簡單的搜尋框的demo，學習View模組和View的事件屬性 前面我們已經知道initialize()方法會在例項化Model時執行，而View和Collection也有對應的方法，所以我們可以在此方法裡定義一些動作。如：

var App = Backbone.View.extend({
    initialize: function() {
        alert('hello');
    },
});
var app = new App();

template

在頁面定義模板，然後利用jquery的html()方法獲取和underscore的template方法轉義

<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/template"所以會被忽略，但我們可以通過對應id來獲取模板

el屬性

所有檢視都擁有一個DOM元素（el屬性）。el可以從檢視的tagName, className, id, attribute以及jquery物件建立，如果為指定，el會是一個空div

var App = Backbone.View.extend({
    // 定義el
    el: $("#search_container"),
    initialize: function() {
        this.render();
    },
    render: function() {
        var label = {
            search_label: '搜尋框'
        };
        // 先用html()方法獲取對應的模板
        // 再用template方法編譯
        var template = _.template($("#search_template").html());
        // 傳入對應的引數
        this.$el.html(template(label));
    },
});
 

這樣就能完成模板的獲取，變數的填充，最後載入編譯後的模板到對應的el中

監聽事件

在View類中定義events屬效能監聽el及其子元素上的事件

var App = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    render: function() {
        var label = {
            search_label: '搜尋框'
        };
        var template = _.template($("#search_template").html());
        this.$el.html(template(label));
    },
    events: {
        // 以'[事件型別] [事件元素]'：'事件處理程式'來定義事件
        'click #search_button': 'doSearch'
    },
    doSearch: function(e) {
        // this指向容器el，而不是事件的目標元素！因為雖然函式時View的方法，但是呼叫的時候是作為元素的方法被呼叫！
        // 所以要通過e.srcElement || e.target？來獲取當前目標？
        var $el = $(e.srcElement || e.target);
        alert('你正在搜尋：' + $("#search_input").val());
    }
});
var app = new App({
    el: $("#search_container")
});

在events屬性上定義事件型別(click)和對應的事件元素(#search_button)，再指定事件的處理程式(doSearch)，完成事件的繫結