前面介紹了存放數據的Model和Collection以及對用戶行為進行路由分發的Router(針對鏈接)。這一節終于可以往頁面上放點東西來玩玩了。這節就介紹了Backbone中得View這個模塊。Backbone的View是用來顯示你的model中的數據到頁面的,同時它也可用來監聽DOM上的事件然后做出響應。但是這里要提一句的是,相比于Angularjs中model變化之后頁面數據自動變化的特性,Backbone要手動來處理。至于這兩種方式的對比,各有優劣,可以暫時不關心。
下面依然是通過幾個示例來介紹下view的功能,首先給出頁面的基本模板:
~~~
<!DOCTYPE html>
<html>
<head>
<title>the5fire-backbone-view</title>
</head>
<body>
<div id="search_container"></div>
<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>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/jquery-1.10.2.js"></script>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/underscore-min.1.8.2.js"></script>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/backbone.js"></script>
<script>
(function ($) {
//此處添加下面的試驗代碼
})(jQuery);
</script>
</body>
</html>
~~~
## 5.1 一個簡單的view
~~~
var SearchView = Backbone.View.extend({
initialize: function(){
alert('init a SearchView');
}
});
var searchView = new SearchView();
~~~
是不是覺得很沒有技術含量,所有的模塊定義都一樣。
## 5.2 el屬性
這個屬性用來引用DOM中的某個元素,每一個Backbone的view都會有這么個屬性,如果沒有顯示聲明,Backbone會默認的構造一個,表示一個空的div元素。el標簽可以在定義view的時候在屬性中聲明,也可以在實例化view的時候通過參數傳遞。
~~~
var SearchView = Backbone.View.extend({
initialize: function(){
alert('init a SearchView');
}
});
var searchView = new SearchView({el: $("#search_container")});
~~~
這段代碼簡單的演示了在實例化的時候傳遞el屬性給View。下面我們來看看模板的渲染。
~~~
var SearchView = Backbone.View.extend({
initialize: function(){
},
render: function(context) {
//使用underscore這個庫,來編譯模板
var template = _.template($("#search_template").html());
//加載模板到對應的el屬性中
$(this.el).html(template(context));
}
});
var searchView = new SearchView({el: $("#search_container")});
//這個reander的方法可以放到view的構造函數中
//這樣初始化時就會自動渲染
searchView.render({search_label: "搜索渲染"});
~~~
運行頁面之后,會發現script模板中的html代碼已經添加到了我們定義的div中。
_這里面需要注意的是在模板中定義的所有變量必須在render的時候傳遞參數過去,不然就會報錯。_?關于el還有一個東西叫做$el,這個東西是對view中元素的緩存。
## 5.3 再來看view中event的使用
頁面上的操作除了可以由之前的router來處理之外,在一個view中定義元素,還可以使用event來進行事件綁定。這里要注意的是在view中定義的dom元素是指你el標簽所定義的那一部分dom節點,event進行事件綁定時會在該節點范圍內查找。
來,繼續看代碼。
~~~
var SearchView = Backbone.View.extend({
el: "#search_container",
initialize: function(){
this.render({search_label: "搜索按鈕"});
},
render: function(context) {
//使用underscore這個庫,來編譯模板
var template = _.template($("#search_template").html());
//加載模板到對應的el屬性中
$(this.el).html(template(context));
},
events:{ //就是在這里綁定的
//定義類型為button的input標簽的點擊事件,觸發函數doSearch
'click input[type=button]' : 'doSearch'
},
doSearch: function(event){
alert("search for " + $("#search_input").val());
}
});
var searchView = new SearchView();
~~~
自己運行下,是不是比寫$("input[type=button]").bind('click',function(){})好看多了。
## 5.4 View中的模板
上面已經簡單的演示了模板的用法,如果你用過django模板的話,你會發現模板差不多都是那么回事。上面只是簡單的單個變量的渲染,那么邏輯部分怎么處理呢,下面來看下。
把最開始定義的模板中的內容換成下面這個。
~~~
<ul>
<% _.each(labels, function(name) { %>
<% if(name != "label2") {%>
<li><%= name %></li>
<% } %>
<% }); %>
</ul>
~~~
下面是js代碼
~~~
var SearchView = Backbone.View.extend({
el: "#search_container",
initialize: function(){
var labels = ['label1', 'label2', 'label3'];
this.render({labels: labels});
},
render: function(context) {
//使用underscore這個庫,來編譯模板
var template = _.template($("#search_template").html());
//加載模板到對應的el屬性中
$(this.el).html(template(context));
},
});
var searchView = new SearchView();
~~~
再次運行,有木有覺得還不錯,模板中使用的就基本的js語法。
總結一下,關于view中的東西就介紹這么多,文檔上還有幾個其他的屬性,不過大體用法都一致。在以后的實踐中用到在介紹。
- 關于
- 前言
- 第一章 Hello Backbonejs
- 第二章 Backbonejs中的Model實踐
- 第三章 Backbonejs中的Collections實踐
- 第四章 Backbonejs中的Router實踐
- 第五章 Backbonejs中的View實踐
- 第六章 實戰演練:todos分析(一)
- 第七章 實戰演練:todos分析(二)View的應用
- 第八章 實戰演練:todos分析(三)總結
- 第九章 后端環境搭建:web.py的使用
- 第十章 實戰演練:擴展todos到Server端(backbonejs+webpy)
- 第十一章 前后端實戰演練:Web聊天室-功能分析
- 第十二章 前后端實戰演練:Web聊天室-詳細設計
- 第十三章 前后端實戰演練:Web聊天室-服務器端開發
- 第十四章 前后端實戰演練:Web聊天室-前端開發
- 第十五章 引入requirejs
- 第十六章 補充異常處理
- 第十七章 定制Backbonejs
- 第十八章 再次總結的說
- Backbonejs相關資源