5

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

嵌套视图的可能方法：

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

});
4

2 回答 2

2

您正在使用模板将非常复杂的元素动态地添加到彼此中。模板旨在动态附加非常简单的 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();
  }
});
于 2012-07-25T16:31:13.000 回答
0

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

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

于 2012-07-26T17:17:28.910 回答