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);
    }
});

改变主干观点

1 个答案: