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 相关文章推荐
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
深入理解javascript的执行顺序
Apr 04 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
vue-router源码之history类的浅析
May 21 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 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
一个简易需要注册的留言版程序
2006/10/09 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
Convert Seconds To Hours
2007/06/16 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
零基础写python爬虫之神器正则表达式
2014/11/06 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
python实现xlsx文件分析详解
2018/01/02 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
浅析Python 责任链设计模式
2020/09/11 Python
康拓普公司Java笔面试
2016/09/23 面试题
幼儿园开学家长寄语
2014/01/19 职场文书
总经理助理职责
2014/02/04 职场文书
六一亲子活动总结
2014/07/01 职场文书
小学生运动会报道稿
2014/09/12 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
让生命充满爱观后感
2015/06/08 职场文书
使用Python解决图表与画布的间距问题
2022/04/11 Python