Javascript 嵌套视图的推荐方式是什么？

我想知道嵌套主干视图的推荐方法是什么

嵌套视图的可能方法：

渲染所有视图并将它们放在路由器中

让IndexView执行路由器中调用的所有嵌套

在下划线模板中包含视图

我已经在这把小提琴上试过运气了：

注释：我知道这个示例不起作用，它只是显示了结构，我目前已经知道了，但我对此并不满意

那么该走哪条路呢？也欢迎链接；）

更新：

使用fguillen答案和另一个线程，我发现我们可以做到：

var IndexView = Backbone.View.extend({

    tagName: "div",

    className: "container",

    template: LayoutTemplate,

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

        this.$('div.content').html(ContentTemplate);
        this.$('div.sidebar').append(new LoginView().render().el);
        this.$('div.sidebar').append(new RegistrationView().render().el);

        return this;
    }

});

---

您正在使用模板动态地将非常复杂的元素一个附加到另一个元素中。模板用于动态附加非常简单的Model.attributes

我不会在你的菜单视图中使用模板。我将菜单框定义为HTML DOM中的普通元素，并实例化MenuView，将此DOM元素分配给

View.el

，如下所示：

var menuView = new MenuView({ el: "#menu" });

然后，对于将子视图渲染到菜单视图，我将使用jQuery

append

、

html

和更多jQuery功能：

// code simplified and not tested
var MenuView = Backbone.View.extend({
  render: function(){
    // the this.$el is already rendered

    // list of elements
    this.collection.each( function( model ){
      var modelView = new ModelView({ model: model });
      this.$el.append( modelView.render().el );
    }, this);

    // additional subViews
    var loginView = new LoginView();
    this.$el.find( "div#login" ).html( loginView.render().el );

    // another way to add subViews
    var loginView = new LoginView({ el: this.$el.find( "div#login" ) });
    loginView.render();
  }
});

退房

---

他们有很好的例子说明如何根据您的需要构造视图。

这里介绍的一种技术是：Backbone.Collection.View是您自己的libs的一部分吗？由于该渲染函数中缺少特定于lib的代码，它可能只是包含在“typo”模块中：^）问题是您的解决方案已经与我的解决方案匹配到了很大一部分。我最感兴趣的是这样一个视图集合中的不同视图：布局、列表、项目、一些第三方视图。这是3-4种不同的视图类型，部分需要特殊订单。您的this.$el不会引用正确的this。您需要在进入.each函数之前保存它。@bluedevil2k对！我已经添加了

此

作为

每个

函数的第二个参数。