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 相关文章推荐
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
node.js事件轮询机制原理知识点
Dec 22 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
11个PHPer必须要了解的编程规范
2014/09/22 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
layui实现数据分页功能
2019/07/27 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
Python分析学校四六级过关情况
2017/11/22 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
Python jieba库分词模式实例用法
2021/01/13 Python
介绍一下代理模式(Proxy)
2014/10/17 面试题
物业客服专员岗位职责
2013/11/30 职场文书
大学生军训感想
2014/02/16 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
电子商务专业求职信
2014/07/10 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers