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库(迷你版)--自建js库总结
Nov 21 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
vue-cli常用设置总结
Feb 24 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
Vue数据绑定简析小结
May 07 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 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 header Content-Type类型小结
2011/07/03 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
浅析php学习的路线图
2013/07/10 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
python多线程方式执行多个bat代码
2016/06/07 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
python dataframe NaN处理方式
2019/12/26 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
房屋委托书范本
2014/04/04 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android