⭐️ 本文首发自 前端修罗场(点击即可加入),一个专注 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 >
- 对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个月,奋力奔跑吧!(下周末有一部《小王子》要上映,我得去瞅瞅~)