Backbone系列:View的學習
阿新 • • 發佈:2019-01-05
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這樣就能完成模板的獲取,變數的填充,最後載入編譯後的模板到對應的el中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)); }, });
監聽事件
在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),完成事件的繫結