无法遍历Backbone模板中的集合

Question

我是一般的编码新手，与Rails一起使用Backbone。 我尝试在模板中迭代收集数据的尝试失败，并且我不确定出什么问题。 加载网页时，似乎json数据和模板的一部分可以很好地加载，但是迭代失败。 这是代码：

acquisition.js：

var Acquisition = Backbone.Model.extend({
});

acquisitions.js：

var Acquisitions = Backbone.Collection.extend({
  model: Acquisition,
  url: '/acquisitions.json'
});

acquisitions_index.js：

var AcquisitionsIndex = Backbone.View.extend({
    tagName: "table",
    render: function() {
      this.$el.html(JST['acquisitions/index']({ collection: this.collection }));
      return this;
    }
});

index.jst.ejs：

<tbody>
  <tr>
    <th>Cash(USD)</th>
    <th>Date</th>
  </tr>
  <% collection.each(function(model) { %>
  <tr>
    <td><%= model.escape('cashUSD') %></td>
    <td><%= model.escape('date') %></td>
  </tr>
  <% }); %>
</tbody>

home.html.erb：

<header>
  <h1>Startup acquisitions</h1>
</header>
  <div id="app"></div>
<script>
  var acquisitions = new Acquisitions;
  acquisitions.fetch();

  var acquisitionsIndex = new AcquisitionsIndex({collection: acquisitions});
  acquisitionsIndex.render();
  $("#app").append(acquisitionsIndex.el)
</script>

Answer 1

要说出mu太短的正确建议，必须理解AJAX中的“ A”代表异步，这意味着当您进行提取时，客户端JavaScript会继续执行。 它不会阻止并等待取回返回。 因此，虽然您的代码如下所示：

1. 获取收藏
2. 接收收藏品作为回应
3. 建立检视
4. 渲染集合：)

您实际上正在经历：

1. 获取收藏
2. 建立检视
3. 在视图中渲染空集合：(
4. 接收收集项作为响应（那里发生了什么？）。

因此，就亩而言，这就是事件发生的地方。 例如，您可以将代码块修改为：

var acquisitions = new Acquisitions;
var acquisitionsIndex = new AcquisitionsIndex({collection: acquisitions});
acquisitionsIndex.listenTo(acquisitions, "sync", acquisitionsIndex.render);
acquisitions.fetch();

现在，此代码表示视图正在侦听集合上的"sync"事件，该事件表示何时从服务器成功同步了集合。 发生sync事件时， render调用视图上的render函数，因为它是listenTo函数中的最后一个参数。 为了确保将视图插入到文档中，您可以将渲染功能更改为：

render: function() {
    this.$el.html(JST['acquisitions/index']({ collection: this.collection }));
    $("#app").append(this.$el);
    return this;
}

请记住，如果要链接视图渲染调用，则最好插入文档$("#app").append(this.$el); 在完成所有链接后（为了防止多个文档重排，但是在本示例中，为了简化起见，我将此行放在了render函数中）。