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

Question

我想知道嵌套Backbone Views的推荐方法是什么.

嵌套视图的可能方法:

1. 渲染所有视图并将它们放在路由器中
2. 让IndexView完成路由器中调用的所有嵌套
3. 在下划线模板中包含视图

我已经在这个小提琴中试过我的运气:http://jsfiddle.net/m48Nc/2/

注释:我知道这个例子不起作用它只是显示结构,我现在想出来了,但对此并不满意.

那么走哪条路呢？也欢迎链接;)

更新:

使用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;
    }

});

Answer 1

您正在使用模板来动态地将非常复杂的元素相互附加。模板旨在动态附加非常简单的 Model.attributes。

我不会为您的 MenuView 使用模板。我将把 Menu 框架定义为 HTML DOM 中的普通元素，并实例化 MenuView，将此 DOM 元素分配给如下所示View.el：

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

然后，为了将子视图渲染到 MenuView 中，我将使用 jQueryappend以及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();
  }
});