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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
JS实现公告上线滚动效果
Jan 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
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP多文件上传类实例
2015/03/07 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
laravel 数据验证规则详解
2019/10/23 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
javascript 关闭IE6、IE7
2009/06/01 Javascript
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
Python中的index()方法使用教程
2015/05/18 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
django创建简单的页面响应实例教程
2019/09/06 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
幼儿园托班开学寄语
2014/01/18 职场文书
综合内勤岗位职责
2014/04/14 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
工作失职检讨书范文
2015/05/05 职场文书
三八节活动简报
2015/07/20 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
pandas中DataFrame检测重复值的实现
2021/05/26 Python
MySQL 全文检索的使用示例
2021/06/07 MySQL
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL