Question

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

嵌套视图的可能方法：

渲染所有视图并将它们放在路由器
让IndexView执行路由器中调用的所有嵌套
在下划线模板中包含视图

我已经尝试过这个小提琴：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中，我将使用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();
  }
});

Answer 2

查看http://ricostacruz.com/backbone-patterns/#view_patterns

他们有很好的例子可以根据您的需求构建您的观点。

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

2 个答案: