Question

我有一个leftMenu部分，我想显示4个按主题分类的菜单。每个菜单都是一个列表，我希望它们显示在同一个视图中。我创建了4个JSON文件，每个文件都有一个Collection和一个Model。

通常我会这样做，首先我在路由器中定义

this.mainMenuCollection = new MainMenuCollection();
this.mainMenuView = new MainMenuView({el:'#nav', collection:this.mainMenuCollection});

所以，现在我在一个视图中在路由器中定义了这4个集合：

this.allcategoryMenuCollection = new AllCategoryMenuCollection();
this.natcategoryMenuCollection = new NatCategoryMenuCollection();
this.intcategoryMenuCollection = new IntCategoryMenuCollection();
this.topcategoryMenuCollection = new TopCategoryMenuCollection();

通常我在视图中渲染集合，如下所示：

$(this.el).html(this.template({mainmenu:this.collection.toJSON()}));

请帮忙

Answer 1

在创建视图时将集合作为对象发送：

this.mainView = new MainView({
  el:'#nav'
});
this.mainView.collections = {
    allcategoryMenuCollection: this.allcategoryMenuCollection
    natcategoryMenuCollection: this.natcategoryMenuCollection
    intcategoryMenuCollection: this.intcategoryMenuCollection
    topcategoryMenuCollection: this.topcategoryMenuCollection
  }

通过调用this.collections.collectionName

访问视图中的集合

Answer 2

这似乎不是一种语义上准确的方法，但是为了利用骨干自动分配model中的collection和options属性，我这样做：

var view = new MyView({
  collection: {
    comments: new CommentsCollection(),
    images: new ImagesCollection()
  }
});

适合我。否则，您必须在initialize函数中添加一行来扩展this，或使用基类。我个人认为这更优雅，即使它缺少一些复数属性。

然后，稍后，您可以使用this.collection.comments.toJSON()作为模板属性。

Answer 3

在外部视图中容纳多个子视图没有任何问题。你的外部观点可能就像这样简单。如果你需要等待渲染所有的集合，你可以尝试：

var MyView = Backbone.View.extend({
  initialize : function (options) {
    var done, collections = options.collections;

    done = _.invoke(collections, 'fetch');
    $.when.apply($, done).done(this.onDataReady);
  },

  onDataReady : function () {
    // Make a second pass at render after setting the flag.
    this.ready = true;
    this.render();
  },

  render : function () {
    if(this.ready === true) {
       // Now render the whole lot.
    } else {
       // Any non-data depending rendering.
    }
  }
});

然后，您可以初始化外部视图并在以下位置传递集合数组：

var view = new MyView({
   collections: [...]
});

如果你不需要所有的集合都可以提前获取数据，那就更简单了。只需传入集合数组并根据需要进行设置：

var MyView = Backbone.View.extend({
    initialize : function (options) {  
        this.collectionA = options.collections[0];
    },

    render : function () {

    }
});

BackboneJS - 一个视图中的多个集合

3 个答案: