如何存储backbone.js视图并再次重用它
我正在使用backbone.js创建一个web应用程序。我有两个选项卡。Tab 1是backbone.js视图，而tab2是另一个主干视图(同类)。
这两个视图被加载到页面中的同一div元素中。目前我所做的是，当用户更改选项卡时，我会使用骨干路由器进行检测。然后，路由器进行检查，查看视图是否已经存在，或者是否应该创建视图。
我创建了一个对象管理器对象，它根据键(键是选项卡名)存储视图对象。
App.ObjectManager.getContentView = function (tabId) {
return App.ObjectManager.ContentHash[tabId];
};
App.ObjectManager.setContentView = function(tabId, view) {
App.ObjectManager.ContentHash[tabId] = view;
};
App.ObjectManager.hasContentView = function(tabId) {
if(App.ObjectManager.ContentHash[tabId]==undefined) {
return 0;
}
else{
return 1;
}
};下面是我创建视图并将其存储到list对象的方法。每次单击选项卡时都会调用此代码，路由器会检测到更改。
$("#myDiv").html("");
if(App.ObjectManager.hasContentView(tabId)==0) { //View is not in the lookup table
console.log("View is not created yet. So we need to create");
content = new App.MyBackboneView(); //create a new view
App.ObjectManager.setContentView(tabId, content); //Store the view
}
else {
console.log("View is already created..So we read it and show it");
content = App.ObjectManager.getContentView(tabId);
}
//Now, we add the view to the main div
$("#myDiv").append(content.el);上面的代码通过向myDiv显示视图来工作。我可以看到文本框和单选按钮等的值。
唯一一件事--事件处理不起作用。因此，如果我在视图中有一个添加了事件处理程序的按钮，则在从保存的对象呈现视图时不会调用该事件。第一次显示视图时，单击事件正在处理。
例如，我在视图中有这个按钮“说我的名字！”
events: {
"click #say": "sayName"
},
sayName: function() {
console.log("I click say Name");
}第一次加载视图时，当我按下按钮时，console会向我显示日志。当我再次返回到选项卡时，此时视图从列表对象中显示，单击事件不起作用。
我的代码有什么问题吗？
希望你能给我一些如何存储视图的方法，我可以再次重用视图。
谢谢。
回答 2
Stack Overflow用户
发布于 2012-05-18 14:22:44
创建视图时，您会清空myDiv内容
$("#myDiv").html("");我认为此操作会自动删除您之前在视图中设置的所有绑定。这实际上是Backbone的一个很常见的问题--这个框架将事件侦听器设置为视图中的dom元素。
解决这个问题最简单的方法可能是为#myDiv创建一个完整的父视图，并在其中设置事件。
视图结构可能如下所示：
TabsView (此处设置事件)|-选项卡视图1(呈现内容)-选项卡视图2(呈现内容)
Stack Overflow用户
发布于 2012-08-29 19:53:17
我也有同样的问题，我有几个显示聚合数据的“标签视图”，比如“我的消息”，“所有消息”，“所有用户”等等。我将视图的对象存储在一个哈希表中，比如“视图”。
是的，就像凯恩·科恩提到的那样：
$('#myDiv').html('') or $('#myDiv').$el.empty()销毁所有绑定...对我来说起作用的是使用“分离”，因为它不破坏绑定(http://api.jquery.com/detach/)，假设之前显示的内容是“所有消息”，用户点击“我的消息”：
views['All messages'].$el.detach()
$('#myDiv').append views['My messages'].el我用的是咖啡脚本...附注：希望这能有所帮助，尽管我对这种方法并不满意……
https://stackoverflow.com/questions/10647363
复制相似问题
腾讯云开发者
