Javascript 更改主干视图

我有一个关于主干处理它的方式的问题。 假设我有以下代码：

<div id="container">
   <div id="header">
   </div>
</div>

在此之后，我将标题更改为主干视图

在我使用完视图并将另一个视图添加到同一个div之后，现在如何再次从header div中删除该视图

我试图覆盖视图存储的变量。这将导致视图被更改为新视图…但它仍将旧视图的所有事件处理程序附加到该视图

提前谢谢

这不会自动删除原始div-您可能希望自己也这样做，但是通过使用setElement，您可以将视图的元素设置为传递给它的任何内容。。所有活动将视情况附上。然后，您需要将该元素附加到它需要去的任何地方

---让我们再试一次----

所以，首先要记住的是视图引用DOM元素。。它们并不是紧密结合在一起的。因此，您可以直接使用$el下的jquery对象

var containerView = new ContainerView();

var headerView = new HeaderView();
var anotherHeaderView = new AnotherHeaderView();

containerView.$el.append(headerView.$el);
containerView.$el.append(anotherHeaderView.$el);

anotherHeaderView.$el.detach();

containerView.$el.prepend(anotherHeaderView.$el);

或者，您也可以创建方法来控制这一点

var ContainerView = Backbone.View.extend({
    addView: function (view) {
        var el = view;
        if(el.$el) { //so you can pass in both dom and backbone views
            el = el.$el;
        }
        this.$el.append(el);
    }
});

也许可以按视图顺序设置视图

var ContainerView = Backbone.View.extend({
    initialize: function () {
        this.types = {};
    },
    addView: function (view, type) {
        var el = view;
        if(el.$el) { //so you can pass in both dom and backbone views
            el = el.$el;
        }
        this.types[type] = el;
        this.resetViews();
    },
    removeView: function (type) {
        delete this.types[type];
        this.resetViews();
    },
    resetViews: function () {
        this.$el.children().detach();
        _.each(['main_header', 'sub_header', 'sub_sub_header'], function (typekey) {
            if(this.types[typekey]) {
                this.$el.append(this.types[typekey]);
            }
        }, this);
    }
});

---

谢谢你的回答。然而，这并不能真正解决我的问题。我不想在另一个元素上重复使用视图。我基本上只想完全删除视图，然后在旧视图所在的位置添加另一个视图。我尝试使用view.remove（）；但这也会删除完整视图，因此我无法再次向该div添加其他视图。我需要找到一种方法将一个视图添加到一个视图中，在我使用完该视图后，能够将另一个视图添加到同一个div中。好吧，这是一种奇怪的用例。让我试着写点别的。也许我问错了问题。假设我只有一个div。这个div的id为“container”。那么，我怎样才能将多个视图添加到这个容器中，并且能够在容器保持完整的情况下再次删除它们呢？啊，好了，我只是想问一下，这是否就是您想要的。