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 基础篇1 什么是js 建立第一个js程序
Mar 14 Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
JS原型对象操作实例分析
Jun 06 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
PHP6 mysql连接方式说明
2009/02/09 PHP
php短址转换实现方法
2015/02/25 PHP
PHP正则验证Email的方法
2015/06/15 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
Python实现发送email的几种常用方法
2014/08/18 Python
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
Django配置文件代码说明
2019/12/04 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
一份比较全的PHP面试题
2016/07/29 面试题
国际商务系学生个人的自我评价
2013/11/26 职场文书
数控专业个人求职信范例
2013/11/29 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
终止合同协议书
2014/04/17 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
新学期开学标语2015
2015/07/16 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书