javascript - 改变主干视图

Question

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

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

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

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

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

提前致谢！

Answer 1

http://documentcloud.github.com/backbone/#View-setElement

这不会自动删除原始 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);
    }
});