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/