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 DOM 学习第七章 表单的扩展
Feb 19 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 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数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python抓取京东图书评论数据
2014/08/31 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Django对models里的objects的使用详解
2019/08/17 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
Python操作Excel的学习笔记
2021/02/18 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
门卫班长岗位职责
2013/12/15 职场文书
团日活动总结
2014/04/28 职场文书
大学生求职计划书
2014/04/30 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
经典导游欢迎词
2015/01/26 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android