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 相关文章推荐
JS比较2个日期间隔的示例代码
Apr 15 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 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
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
PHP使用递归生成文章树
2015/04/21 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
js实现文字滚动效果
2016/03/03 Javascript
浅析vue数据绑定
2017/01/17 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
新手简单了解vue
2019/05/29 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
使用SAE部署Python运行环境的教程
2015/05/05 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
Python中装饰器学习总结
2018/02/10 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
Python将字典转换为XML的方法
2020/08/01 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
运动会稿件200字
2014/02/07 职场文书
迟到检讨书300字
2014/02/14 职场文书
《小池塘》教学反思
2014/02/28 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript