0

我正在使用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;
    }
};

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

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

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

我的代码有问题吗？

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

谢谢。

4

2 回答 2

0

我有同样的问题，我有几个“标签视图”显示聚合数据，比如“我的消息”、“所有消息”、“所有用户”等。我将视图对象存储在哈希中，比如“视图” '。

是的，正如凯恩科恩所说：

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

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

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

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

于 2012-08-29T11:53:17.367 回答
0

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

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

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

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

视图结构可能如下所示：

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

于 2012-05-18T06:22:43.703 回答