BackboneJs 入门学习[11]—View 实践

⭐️ 本文首发自 前端修罗场(点击即可加入)，一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。现在加入，即可参与打卡挑战，和一群人一起努力。挑战成功即可获取一次免费的模拟面试机会，进而评估知识点的掌握程度，获得更全面的学习指导意见，不走弯路，不吃亏！

---

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 元素；
看一个示例：

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 >

2. 对Dom元素事件的绑定——event属性

---

先看一个示例：

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

我们可以在模版中定义变量，通过字典的方式传递进去；

例如：

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为视图指定根元素

好啦！本篇就到这里！(❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取一份【免费的优质学习资料】,一起学习，一起进步，不走弯路，不吃亏~)

每篇一语：

生活给了我们很多选择，选择在这个时代似乎被强调的很重要。上午看了李彦宏在《开讲啦》的vedio,才发现他对信息资源的态度我想是搜索引擎一致的开端吧。所以，在这个信息资源能随时从网络获取的时代，我们愈加趋近平等，我们不应该抱怨没有天赋，因为我们都不笨。
距离新年还有2个月，奋力奔跑吧！（下周末有一部《小王子》要上映，我得去瞅瞅～）