javascript - Backbone View 上的 this.remove() 使 el 消失

Question

引用这篇文章:Backbone.js : repopulate or recreate the view?

我基本上使用的是票数最多的答案，但不是公认的答案来显示我的路由器的 View 。

所以我本质上是调用

this.unbind();
this.remove();

我遇到的问题是我有一个左侧导航面板，然后在右侧有我的内容。它看起来像这样:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            // nav bar stuff
        </div>
        <div class="span10">
            <div id="content-container"></div>
        </div>
    </div>
</div>

所以当我在一个 View 上调用 this.remove() 时，它基本上给我留下了:

<div class="span10"></div>

div 容器消失了。我不知道删除主干 View 或插入 <div id="content-container"></div> 的最佳方法是什么曾是。我想当我处理我的 View 时，在调用 remove() 之后，我可以查看 DOM 并插入内容容器，但似乎应该有更好的方法。有什么想法吗？提前致谢。

Answer 1

来自fine manual :

remove view.remove()

Removes a view from the DOM, and calls stopListening to remove any bound events that the view has listenTo'd.

The implementation几乎是英语到 JavaScript 的直译:

remove: function() {
  this.$el.remove();
  this.stopListening();
  return this;
}

this.$el.remove() 调用从 DOM 中移除元素。

您的问题是您将其用作 View 的 el:

<div id="content-container"></div>

所以 view.remove() 删除你的 #content-container。

有解决办法:

1. 让 View 创建自己的 el，然后将其放入 #content-container。

2. 覆盖 remove 方法:

   remove: function() {
       this.unbind();
       this.stopListening();
       // No this.$el.remove() since we don't own the `el`
       return this;
   }