一、渲染
- 模板
<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>
</body>
首先看一下这个模板, 和我熟悉的模板语法dom 部分是差不多的,区别就在于script 部分的渲染。
那么bab 如何使用尼?
var SearchView = Backbone.View.extend({
render: function(context) {
var template = _.template($("#search_template").html());
$(this.el).html(template(context));
}
});
var searchView = new SearchView({el: $("#search_container")});
searchView.render({search_label: "搜索渲染"});
这里的render 就是我们的渲染函数了,里面就是和其他模板语法一样,将内容渲染。
实例化 SearchView 中里面的el 就是我们的选择器,下面render 传参就是摸板中的各个变量
这里面需要注意的是在模板中定义的所有变量必须在render的时候传递参数过去,不然就会报错。 关于el还有一个东西叫做$el,这个东西是对view中元素的缓存。
- dom 动态生成
就和我们的js一样,除了模板语法我们也可以动态创建dom,然后插入对应标签。
var ListView = Backbone.View.extend({
tagName : 'div',
className : 'listview',
id : 'list',
attributes : {
title : '列表',
style : 'color:red'
},
render : function() {
this.el.innerHTML = 'Hello World!';
document.body.appendChild(this.el);
}
});
var listview = new ListView();
listview.render();
运行上面的js ,最后会在body中生成一个div,相比较js 的创建会更简单。
<div title="列表" style="color:red" id="list" class="listview">Hello World!</div>
二、 event 事件
<p id="view">
<input type="button" value="Create" id="create" />
<input type="button" value="Read" id="read" />
<input type="button" value="Update" id="update" />
<input type="button" value="Delete" id="delete" />
</p>
<script type="text/javascript">
var MyView = Backbone.View.extend({
el : '#view',
events : {
'click #create' : 'createData',
'click #read' : 'readData',
'click #update' : 'updateData',
'click #delete' : 'deleteData'
},
createData : function() {
// todo
},
readData : function() {
// todo
},
updateData : function() {
// todo
},
deleteData : function() {
// todo
}
});
var view = new MyView();
</script>
events中的事件是通过delegate()方法绑定到视图对象的el元素上。
events中选择器所对应的元素必须处于视图的el元素之内,否则绑定的事件是无法生效的。
有些情况下可能我们仍然需要手动绑定和解除事件,视图对象提供了delegateEvents()和undelegateEvents()方法。