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会继续执行。它不会阻塞并等待返回获取。因此，虽然您的代码如下所示：

抓取集合
接收收集项目作为回复
创建视图
在视图中渲染集合：）

您实际上正在体验：

抓取集合
创建视图
在视图中渲染空集合：（
接收收集物品作为回应（那里发生了什么？）。

因此mu是简短评论，这是事件发挥作用的地方。例如，您可以将代码块修改为：

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

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

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

请记住，如果您正在链接视图渲染调用，那么在完成所有链接后可能更好地执行文档插入$("#app").append(this.$el);（以防止多个文档重排，但是我将此行放在渲染函数中为了简单起见，在这个例子中。

无法在Backbone模板中迭代集合

1 个答案: