从一个骨干视图的数据传递到另一个 [英] Passing data from one Backbone view to another
问题描述
可以说我有它加载两个环节,一个具有锚文本测试1和其他与锚文本测试2。
以下骨干视图我绑定一个click事件,我得到被点击的链接的HTML,并将其存储在 clickedHtml 变量中。
现在,这一观点是由骨干路由器装载。
当用户单击任一两个链接之一(TEST1或TEST2)被称为另一种观点认为主将路由器装载。
现在,我可以怎样通过clickedHtml变量看法?
我应该使用localStorage的?
我应该在全球范围宣布它像window.clickedHtml?
有没有更好的办法?
泰!
//文件:查看/ test.js
定义([
jQuery的,
下划线,
'骨干'
]函数($,_,骨干){ VAR测试= Backbone.View.extend({ EL:.TEST', 初始化:功能(){ VAR认为这=; 。该$ el.html('< A HREF =#/主>测试1< / A>< BR />< A HREF =#/主>测试2< / A>') ;
}, 事件:{ 点击.TEST一个':'点击' }, 点击:功能(E){ VAR clickedHtml = $(e.target)的.html(); } 回归测试; });
下面是我的路由器:
//文件:router.js 定义([
jQuery的,
下划线,
'骨干',
意见/测试,
意见/主
]函数($,_,骨干,测试主){ VAR路由器= Backbone.Router.extend({ 路线:{
'':'家',
'测试':'测试'
}
}); VAR初始化函数=(){ VAR路由器=新路由器(); router.on('路线:家,函数(){ VAR主要=新的Main(); }); router.on('路线:测试,函数(){ VAR测试=新测试();
}); Backbone.history.start();
} 返回{ 初始化:初始化
}
});
Basicly你应该使用Backbone.Event:(或它的等价物木偶)
//声明
变种notificationService = {};
_.extend(notificationService,Backbone.Events);//通过使用监听器
notificationService.on(警报,功能(O){
警报(O);
});//由出版商使用
notificationService.trigger(警报,{foo的栏});
真正的问题是它如何获得从一个视图传递到另一个?
我看到它的方式,你有两个选择:
- 泡泡notificationService从一个视图到另一个初始化
- 总结与返回它(创建一个可以通过requirejs传递一个几乎全球notificationService)一requirejs模型notificationService。
虽然我不喜欢单身了一下,这种情况下,可以很容易地在requirejs每个模型得到注入了一单notificationService对象会派上用场。
修改
另一种选择,的快速和肮脏的有一个后,只需使用jQuery来触发的DOM(特别是body元素)的事件,并听取身体其他视图
//听力视图,后DOM准备就绪
$(身体)。在(警告功能(事件,参数1,参数2){
警报(参数1 +\\ n+参数2);
}); //触发上来看,后DOM准备就绪
$(机构)的触发器(警报,[自定义,事件])。
注意
这一次的倾听视图被关闭的通知,它必须从监听事件删除自身(取消/关闭),所以你不会有内存泄漏
Lets say I have the following Backbone view which loads two links, one with the anchor text "test1" and the other with the anchor text "test2".
I bind a click event and I get the HTML of the link that was clicked and store it inside the clickedHtml variable.
Now, this view is loaded by a Backbone router.
When the user clicks either one of the two links (test1 or test2) another view called "main" will be loaded by the router.
Now, how can I pass the "clickedHtml" variable to that view?
Should I use LocalStorage?
Should I declare it globally like window.clickedHtml?
Is there a better way?
Ty!
// file: views/test.js
define([
'jquery',
'underscore',
'backbone'
], function($, _, Backbone) {
var Test = Backbone.View.extend({
el : '.test',
initialize : function () {
var that = this;
that.$el.html('<a href="#/main">test1</a><br /><a href="#/main">test2</a>');
},
events : {
'click .test a' : 'click'
},
click : function (e) {
var clickedHtml = $(e.target).html();
}
return Test;
});
Here is my router:
// file: router.js
define([
'jquery',
'underscore',
'backbone',
'views/test',
'views/main'
], function ($, _, Backbone, Test, Main) {
var Router = Backbone.Router.extend({
routes: {
'' : 'home',
'test' : 'test'
}
});
var initialize = function () {
var router = new Router();
router.on('route:home', function () {
var main = new Main();
});
router.on('route:test', function () {
var test = new Test();
});
Backbone.history.start();
}
return {
initialize : initialize
}
});
Basicly you should use Backbone.Event:(Or it's equivalents in Marionette)
//Declaration
var notificationService = {};
_.extend(notificationService, Backbone.Events);
//Used by listener
notificationService.on("alert", function(o) {
alert(o);
});
//Used by publisher
notificationService.trigger("alert", {foo:"bar"});
The real question is how does it get passed from one view to another?
The way I see it, you have 2 options:
- Bubble notificationService from one view to another in initialization
- Wrap the notificationService with a requirejs model that returns it (creates a 'almost global' notificationService that can be passed by requirejs).
Although I don't like singletons a bit, this case a of a singleton notificationService object that can easily get injected by requirejs in every model will come in handy.
EDIT:
Another option, the quick and dirty one, just use jquery to trigger event on the DOM (specifically the body element) and listen to body in the other view
//on Listening view, after DOM is ready
$( "body" ).on( "alert", function( event, param1, param2 ) {
alert( param1 + "\n" + param2 );
});
//on Triggering view, after DOM is ready
$( "body").trigger( "alert", [ "Custom", "Event" ] );
NOTE:
notice that once a listening view is closed, it must removes itself from listening to events (unbind/off), so you wont have memory leak
这篇关于从一个骨干视图的数据传递到另一个的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!