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 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
使用JQuery进行跨域请求
Jan 25 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
Node.js事件驱动
Jun 18 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 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
COM in PHP (winows only)
2006/10/09 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
php截取字符串函数分享
2015/02/02 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
浅谈对yield的初步理解
2017/05/29 Python
Python简单读取json文件功能示例
2017/11/30 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
YUV转为jpg图像的实现
2019/12/09 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
Python识别验证码的实现示例
2020/09/30 Python
自考生毕业自我鉴定
2013/10/10 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
安全教育月活动总结
2014/05/05 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
授权收款委托书范本
2014/10/10 职场文书