Javascript 如何存储backbone.js视图，然后再次重用它

我正在使用backbone.js创建一个web应用程序。我有两个标签。Tab 1是一个backbone.js视图，Tab 2是另一个backbone视图（同类）

这两个视图都加载到页面中的同一个div元素中。目前我所做的是，当用户更改选项卡时，我使用主干路由器检测它。然后路由器进行检查，查看是否已经存在视图，或者是否应该创建视图

我创建了一个对象管理器对象，它基于键（键是选项卡名称）存储视图对象

下面是我创建和存储视图到列表对象的步骤。每次单击选项卡，路由器检测到更改时，都会调用此代码

$("#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显示视图来工作。我可以看到显示的文本框和单选按钮等的值

唯一的问题是事件处理不起作用。因此，如果视图中有一个按钮添加了事件处理程序，则从保存的对象渲染视图时不会调用该事件。首次显示视图时，单击事件正在处理

例如，我在视图中有一个按钮“说出我的名字！”

第一次加载视图时，当我按下按钮时，console会显示日志。当我再次回到选项卡时，此时从列表对象显示视图，单击事件不起作用

我的代码有问题吗

希望您能给我一些方法来存储视图，我可以再次重用视图

---

谢谢。

创建视图时，请清空myDiv内容

$("#myDiv").html("");

我认为此操作会自动删除您先前在视图中设置的所有绑定。这实际上是主干网的一个常见问题——该框架将事件侦听器设置为视图中的dom元素

处理这个问题最简单的方法可能是为#myDiv作为一个整体创建一个父视图，并在其中设置事件

视图结构可能如下所示：

TabsView（在此处设置事件） | -选项卡视图1（渲染内容）

---

-选项卡视图2（呈现内容）

我也有同样的问题，我有几个“选项卡视图”显示聚合数据，如“我的消息”、“所有消息”、“所有用户”等。我将视图的对象存储在散列中，比如“视图”

是的，正如凯恩·科恩所提到的：

$('#myDiv').html('') or $('#myDiv').$el.empty()

销毁所有绑定。。。对我有效的方法是使用“分离”，因为它不会破坏绑定（），假设以前显示的内容是“所有消息”，用户单击“我的消息”：

views['All messages'].$el.detach()
$('#myDiv').append views['My messages'].el

我用coffescript。。。

---

另外，希望这能有所帮助，尽管我对这种方法不满意……

或$（“#myDiv”）.empty（）。同样的事情，但有点优雅。@TyroneMichael，我也通常使用empty（）而不是html（“”），但由于这是问题中的一行，我认为没有必要修改它。谢谢。凉的下面是我做的App.TabMainView=Backbone.View.extend（{el:#myDiv），事件：{click#say:“sayName”}，sayName:function（）{console.log（“I click say Name”）；}，initialize:function（）{console.log（“Main TabsView View-created”）；var-content=this.options.model.content；$（this.el）.append（content.el）；}）；然后在路由器代码中，我添加content=App.ObjectManager.getContentView（tabId）；var模型={content:content}；var tabView=newapp.TabMainView（{model:model}）；通过上面的代码更改，现在我看到事件已启用。只是事情越来越复杂了。i、 例如，当我单击选项卡1并按下按钮时，它会显示“我单击说出姓名”，然后，当我转到选项卡2并按下按钮时，它会显示“我单击说出姓名”两次，当我再次来到选项卡1时，按下按钮时，它会显示“我单击说出姓名”三次。还有什么我应该在上面检查的来处理这个多句柄堆叠吗？@user1402539，检查你的代码，看起来你要重新初始化TabMainView两次。它应该只初始化一次。您是否从单个选项卡视图中删除了单击事件？您应该将其作为新问题发布，而不是作为旧问题的答案发布

$('#myDiv').html('') or $('#myDiv').$el.empty()

views['All messages'].$el.detach()
$('#myDiv').append views['My messages'].el