从一个骨干视图的数据传递到另一个 [英] 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（'＆LT; A HREF =＃/主＆GT;测试1＆LT; / A＆GT;＆LT; BR /＆GT;＆LT; A HREF =＃/主＆GT;测试2＆LT; / A＆GT;'） ;
}， 事件：{ 点击.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屋！
