javascript - 主干删除视图删除el

Question

我正在创建一个单页应用程序，而且我对骨干很陌生。我在创建使用相同 wrapper-div 的多个视图时遇到问题。

我的设置：

我为所有视图添加了关闭功能：

Backbone.View.prototype.close = function(){
    this.remove();
    this.off();
    if (this.onClose){
        this.onClose();
    } 
}

我有一个 wrapper-div，我想在其中渲染视图、删除它们并渲染新视图。所以我的 SetupView 看起来像这样：

app.SetupView = Backbone.View.extend({
    el: '#my_view_wrapper',
    ...
});

从交换视图的功能中，我关闭当前（打开）视图，如下所示：

var v = this.model.get('view');
v.close();

问题

我的问题是我有多个视图使用相同的 wrapper-div。但是当我关闭一个视图时，这个 wrapper-div 似乎被删除了，我尝试创建的下一个视图找不到这个 div。

我想有一个简单的解决方案？我想重用相同的包装器，并且只删除其中的视图，而不是包装器本身。

score 25 · Accepted Answer

就像一个补充（供以后参考）：另一个选择是覆盖子视图remove，以便它只是清空$el而不是删除它。例如。

remove: function() {
      this.$el.empty().off(); /* off to unbind the events */
      this.stopListening();
      return this;
}

我个人更喜欢这个，因为它消除了插入没有实际用途的包装元素的需要。

score 17 · Accepted Answer

在您的场景中，不要使用现有的 DOM 元素作为您的“el”值。Backbone 将为您创建元素。实例化视图时，您可以执行以下操作将其附加到现有的包装元素。

$(viewName.render().el).appendTo('#my_view_wrapper');

2 回答 2