骨干多集合获取和渲染答案

【问题标题】：Backbone Multiple Collection Fetch and Rendering骨干多集合获取和渲染
【发布时间】：2014-09-22 17:24:00
【问题描述】：

我正在开发一个 Backbone 应用程序。

我有一个名为 “仪表板” 的视图。在这个仪表板视图中，我将获取两个数据集合；一个用于文章表中的最近文章列表，另一个用于作者表中的作者列表。

请注意，我在 mySQL 数据库中有两个不同的表，我使用 SlimPHP Api 进行查询和检索数据。

我也在使用 Handlebars 模板化 Javascript 库来编译 HTML。

问题： 我的问题是，进行这两个查询然后将两个集合数据发送到 Handlebars 编译器的最佳方法是什么，这将创建 HTML（在循环通过集合模型之后）并最终被带入渲染函数。

这是我迄今为止尝试过的（仪表板查看 Javascript 文件）：

http://jsfiddle.net/n6c3q16r/2/

我试图获取两个模型数据并将其传递给 jsFiddle 上第 17 行的渲染函数：

this.$el.html(this.template(this.collection, this.topAuthorsCollection));

但这不起作用。

【问题讨论】：

如果您有两个集合，您需要传入另一个对第二个集合的引用，或者您需要构建两个单独的视图，每个视图负责不同的集合。我推荐后者，除非您需要显示数据的方式不可分割地联系在一起。

标签： backbone.js

【解决方案1】：

试试这个：

initialize: function() {
    this.listenTo(this.topAuthorsCollection, 'reset', this.render);
    this.topAuthors = new topAuthorsModel();
    this.topAuthorsCollection = new topAuthorsCollection({model: this.topAuthors});
    this.collection.fetch({
        reset: true,
        success: function() {
            this.topAuthorsCollection.fetch({reset: true})
        }
    });

}

【讨论】：

【解决方案2】：

您可以使用承诺。在这种情况下，我个人最喜欢的是jQuery.when

$.when(collection1.fetch(),collection2.fetch()).done(function(){
         //Do stuff here
});

API - http://api.jquery.com/jquery.when/

更新小提琴 - http://jsfiddle.net/n6c3q16r/4/

【讨论】：

它给出一个错误：Uncaught ReferenceError: fetchOne is not defined