javascript - 没有指定预定义 el 的主干视图不呈现

Question

我想要做的是创建可以在不删除父元素的情况下移除的视图。我发现当我el直接在视图上设置属性时，当我设置属性时.remove()，父元素也被删除了。

我试过创建一个视图，只是tagName想它会弹出它body，但事实并非如此，它似乎根本没有将它插入到页面中。

在不删除实际包含元素的情况下从元素中完全删除视图的正确方法是什么？

Answer 1

我不确定“父元素”是否为el.

var DemoView = Backbone.View.extend({
    el: "#container",
    events: {
        "click button": "removeSelf"
    },
    render: function () {
        this.$el.append("<button>remove</button>");
        return this;
    },
    removeSelf: function () {
        this.remove();
    }
});
new DemoView().render();

如果单击按钮，#container将被删除；如果您不希望#container被删除，只需不设置el属性，DemoView 将创建一个空的div，就像这样：

var DemoView = Backbone.View.extend({
    events: {
        "click button": "removeSelf"
    },
    render: function () {
        this.$el.append("<button>remove</button>");
        return this;
    },
    removeSelf: function () {
        this.remove();
    }
});
var demoView = new DemoView();
$("#container").append(demoView.render().el);

现在，如果您单击按钮，demoView 将被删除，但#container不会。

Answer 2

如果您不指定默认 el，则必须稍后将它们附加到元素中，例如view.render().$el.appendTo('body'). body 可以是指向容器元素的任何其他选择器。