将多个主干视图添加到父视图的正确方法

Question

我有多个主干视图组成一个屏幕，目前我正在这样做：

render : function() {
    this.$el.html(this.template());

    this.view2 = new View2();
    this.view2.render();
    this.$el.append(this.view2.$el);

    ... more views added here as necessary
}

这是处理多个视图的正确方法，还是有更好的方法将视图附加到当前视图？

我希望能够销毁并重新创建一个视图，并从父视图中删除/添加相关的 HTML，而无需手动执行此操作。

Answer 1

说实话，我真的建议您查看Marionette 功能。我有使用主干构建大型应用程序的经验，可以说它是开发中真正的魔杖。它可以帮助您避免与视图一起使用的内存泄漏，并使您的代码更加紧凑和清晰，减少样板代码。

因此，在您的情况下，您可以获得布局视图、创建区域并在区域中渲染视图。

var Layout = Marionette.Layout.extend({
    regions: {
        head: "#head",
        main: "#main"
    }
});

var layout = new Layout();
layout.render();

layout.main.show(new SomeView());