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 相关文章推荐
js中的replace方法使用介绍
Oct 28 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
Json实现传值到后台代码实例
Jun 30 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
全面了解函数声明与函数表达式、变量提升
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获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
在Python中使用正则表达式的方法
2015/08/13 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
简述Python中的进程、线程、协程
2016/03/18 Python
python中的格式化输出用法总结
2016/07/28 Python
一道python走迷宫算法题
2018/01/22 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
Python @property装饰器原理解析
2020/01/22 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
台湾家适得:Homeget
2019/02/11 全球购物
成考报名单位证明范本
2014/01/16 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
夜不归宿检讨书
2014/02/25 职场文书
车间主任岗位职责
2014/03/16 职场文书
承诺书格式范文
2014/06/03 职场文书
2014年中秋寄语
2014/08/11 职场文书
放假通知怎么写
2015/08/18 职场文书