Backbone中View之间传值的学习心得


Posted in Javascript onAugust 09, 2016

Backbone中的View就是用来展示由Model层传出的数据,或者在View里产生的一些数据,包括输入框中输入等产生的数据,由当前View传递到另外一个View层里,应该怎么办呢,我之前读到一位博主《Backbone View的三种通信方式 》写的尤为的清晰,在我实际的项目中,常常使用的也就是最后一种方式。

嘿嘿,分享知识是一件快乐的事情,我就直接借鉴表述一下如下:

直接用 Backbone 作为事件注册机,

Backbone中View之间传值的学习心得

代码如下:

var ApplicationView = Backbone.View.extend({
initialize : function(){
this.documentView = new DocumentView();
this.sidebarView = new SidebarView();
},
});
var DocumentView = Backbone.View.extend({
onEdit : function(){
Backbone.trigger('documentEdit');
}
});
var SidebarView = Backbone.View.extend({
initialize : function(options){
Backbone.on('documentEdit', this.onDocumentEdit, this);
},
onDocumentEdit : function(){
// react to document edit.
}
});

使用Backbone 时间注册机方法,不仅仅能够实现同一个父级View下不同的子级View之间的信息传递,并且还能够实现不同父级View下各个子级View的信息传递,我当时刚接触的时候感觉这个方法特别的好使,但是后来又出现了两个我有点困惑的地方,我也一并分享下。

第一个就是当我们由父级View向子级View传递信息或者数据的情况,用事件注册应该也是可以的,但是在项目中,我采用的是在初始化视图的时候,将父级View中的要传递的信息分配个子View,这样视图render出之后,就已经有了父级View给予它的数据。就如这样:

Backbone中View之间传值的学习心得

this.receive是由父级View已经包装好的,在初始化子View时候就把this.receive下发就好了。

第二种情况就是同一个子级View之间的传递,这种情况可能大家都懂的,我还是解释一下吧,就是在一个子级View里面定义一个针对这一个View的全局变量,然后通过this引用这个变量就Ok。

以上所述是小编给大家介绍的Backbone中View之间传值的学习心得,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript学习笔记4 Eval函数
Jan 11 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 #Javascript
jQuery 生成svg矢量二维码
Aug 09 #Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 #Javascript
浅谈js基本数据类型和typeof
Aug 09 #Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 #Javascript
详解js实现线段交点的三种算法
Aug 09 #Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 #Javascript
You might like
php+dbfile开发小型留言本
2006/10/09 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
php文件上传类的分享
2017/07/06 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
纯javascript实现分页(两种方法)
2015/08/26 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
javaScript语法总结
2016/11/25 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
深入学习python的yield和generator
2016/03/10 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
基于python的字节编译详解
2017/09/20 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
python将unicode和str互相转化的实现
2020/05/11 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
让IE支持HTML5的方法
2012/12/11 HTML / CSS
生产部经理岗位职责
2013/12/16 职场文书
个人自我评价分享
2013/12/20 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
本科毕业论文导师评语
2014/12/31 职场文书