通过 Restful API 用于用户界面的 Backbone JS答案

【问题标题】：Backbone JS for User Interface over Restful API通过 Restful API 用于用户界面的 Backbone JS
【发布时间】：2017-06-27 21:38:57
【问题描述】：

我正在使用 Backbone JS 编写 UI。后端公开了一个 REST API，主干 JS 在其 MVC 方法中使用该 API。到目前为止，就呈现 REST 资源而言，一切都按预期工作。 IE。我为/as 和/bs 定义了模型和视图，我使用路由在两者之间切换。

现在我想添加一个用于添加/bs 的表单，以便我可以发布新的b 实例。表单的一部分将是一个组合框，用户可以在其中从可能的/as 选项中进行选择。我开始将表单附加到模板代码以呈现列表/bs。但是对于表格，我也需要获得/as。 这应该如何工作？

假设我有一个用于/bs 渲染的模板，它遍历每个项目b。表格应该在表格之后，并获取有关/as的信息。

                 <% _.each(items, function(item) { %>
                <tr>
                    <td>
                        <%= item.name %>
                    </td>
                    <td>
                        <%= item.description %>
                    </td>
                <% }); %>

这样做的一种方法是将GET /bs 的响应扩展为包括所有/as，这不会让人感到平静。

另一个选项是让 BListView 获取这些值并将其作为另一个选项提供给模板。

这里的做法是什么？

【问题讨论】：

“我开始将表单附加到模板代码以呈现列表 /bs。但是对于表单，我也需要获取 /as。这应该如何工作吗？” 这部分不清楚。在您的解释中/as 表示具有视图和模型的路线。你是什么意思你想要这个表格？你想在另一个视图中渲染一个视图吗？请尝试改写问题

标签： backbone.js

【解决方案1】：

您的视图中可以有多个集合。当然，如果您在创建视图时使用collection: myCollection，那么myCollection 将是“主要”集合，仅此而已。您可以继续在您的 initialize() 方法中添加您想要的任何额外集合

initialize: function() {
  this.anotherCollection = new Backbone.Collection(...);
  // then listen for any event, let's say 'update'
  this.listenTo(this.anotherCollection, 'update', function() {
    //do something in your view, usually, call this.render()
  });
  this.anotherCollection.fetch();
}

不过，这个anotherCollection 不会在您的模板中自动传递。您必须手动传递它。

template: _.template(theTemplate, {otherCollection: this.anotherCollection})

【讨论】：