BackboneJs入门学习—View实践篇
假期过的还好么？哈哈，国庆跑去耍啦～确实累着了，一躺下就是睡……_
OK，继续我们的 Backbone 学习之旅吧！
上一篇中，我们只是简单的介绍了 View 模块，讲解了 View 的概念。
本篇中，我们讲解 View 的相关属性；
1.el属性：
el属性是做何用呢？在Backbone的官方文档中作如下解释：
所有的视图都拥有一个 DOM 元素（el 属性），即使该元素仍未插入页面中去。 视图可以在任何时候渲染，然后一次性插入 DOM 中去，这样能尽量减少 reflows 和 repaints 从而获得高性能的 UI 渲染。
即： （1）. 用于引用 Dom 中的一些元素，每个 Backbone 的 View 属性都有这种 el 属性； （2）. 若没有声明 el，会默认构造一个，表示一个空的 div 元素； 看一个示例：
代码语言：javascript复制searchView=Backbone.view.extend({
initialize:function(){
//this.render();
},
render:function(){
//使用underscore这个库来编译模版
var templete=_.templete($('#search_templete').html().{});
//加在模块到对应的el属性中
this.el.html(templete);
}
});
var searchView=new searchview({el:$("#search_container")});
searchView.render();
//模版
<script id="search_templete">
<label><%=search_label%></ label>
<input type="text" id="search_input"/>
<input type="button" id="search_button" value="search"/>
< /script >- 对Dom元素事件的绑定——event属性
先看一个示例：
代码语言：javascript复制searchview=Backbone.view.extend({
initialize:function(){
this.render();
},
render:function(){
var templete=_.templete($("#search_templete).html().{});
//使用underscore来编译模版
//加载模版到对应的e l 属性中
this.el.html(templete);
},
//进行事件绑定
events={
'click input[type=button]':'doSearch'
//定义类型为button的input标签的点击事件，触发函数doSearch
},
doSeach:function(event){
alert("search for" $("#search_input").val());
}
});
var searchview=new SearchView({el:$("#search_container")});3.Veiw 中的模版——templete
我们可以在模版中定义变量，通过字典的方式传递进去；
例如：
代码语言：javascript复制render:function(){
var templete=_.templete($("#search_templete").html(),{search_label:"hello"});
this.el.html(templete);
}
//需要注意的是：对于实际应用，页面数据的变化要同步到服务器； 最好的方法是：回传变化的数据，然后修改页面上对应的数据，而非刷新页面
例如：
render:function(search_label){
var templete=_.templete($("#search_templete").html(),{search_label:search_label});
this.el.html(templete);
},
events:{
'click input[type=button]':'doChange'
},
doChange:function(event){
//通过model发送数据到服务器
this.render('Hello' $("#search_input").val());
}
});
var searchView=new searchView({el:$("#search_container")});以上就是关于View操作的相关讲解了，重新回顾下View，它在与模型数据的关系时息息相关的：
当模型数据发生改变，视图立刻自动更新，这一切都不需要重绘页面。创建自定义的视图类。通常我们需要重载render 函数,声明事件,通过tagName,className或id为视图指定根元素
