Question

我正在使用backbone.js创建一个Web应用程序。我有两个标签。选项卡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;
    }
};

以下是我创建视图并将其存储到列表对象的操作。每次单击选项卡时都会调用此代码，路由器会检测到更改。

$("#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");
}

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

我的代码有问题吗？

希望你能给我一些如何存储视图的方法，我可以再次重用视图。

感谢。

Answer 1

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

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

我认为此操作会自动删除您之前在View中设置的所有绑定。这实际上是Backbone的一个常见问题 - 这个框架将事件监听器设置为视图中的dom元素。

处理此问题的最简单方法是为整个#myDiv创建一个父视图，并在那里设置事件。

视图结构可能如下所示：

TabsView（在此设置事件） | - 标签视图1（渲染内容） - 标签视图2（渲染内容）

Answer 2

我遇到了同样的问题，我有几个“标签视图”显示聚合数据，例如“我的消息”，“所有消息”，“所有用户”等。我将视图的对象存储在散列中，说'观点'。

是的，确实正如Kane Cohen所说：

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

破坏所有绑定...对我有用的是使用“detach”，因为它不会破坏绑定（http://api.jquery.com/detach/），假设之前显示的内容是“所有消息”，并且用户点击“我的”消息：

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

我使用coffescript ...... 附：希望这会有所帮助，尽管我对这种方法并不满意......

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

2 个答案: