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 相关文章推荐
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
全面了解函数声明与函数表达式、变量提升
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
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
2016/08/02 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
什么是.net
2015/08/03 面试题
二年级学生评语大全
2014/04/23 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
工程部岗位职责范本
2015/04/11 职场文书
防止web项目中的SQL注入
2021/12/06 MySQL