Ruby on rails 无法在主干模板中迭代集合

我不熟悉一般的编码，也不熟悉Rails的主干。我尝试在模板中迭代收集数据失败，我不确定出了什么问题。加载网页时，json数据和部分模板似乎加载良好，但迭代失败。代码如下：

acquisition.js：

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

acquisitions.js：

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

收购(u 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>

初创企业收购
var收购=新收购；
fetch（）；
var acquisitionsIndex=新的acquisitionsIndex（{collection:acquisitions}）；
acquisitionindex.render（）；
$（“#app”）.append（acquisitionindex.el）

要将mu的正确建议放在答案中，必须理解AJAX中的“A”代表异步，这意味着在执行获取时，客户端JavaScript会继续执行。它不会阻塞并等待回迁。因此，虽然您的代码如下所示：

取回集合

接收收集项目作为响应

创建视图

视图中的渲染集合：）

您实际上正在经历：

取回集合

创建视图

在视图中呈现空集合：(

接收收集项目作为响应（那里发生了什么？）

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

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

此代码现在表示视图正在侦听

“同步”

集合上的事件，表示何时从服务器成功同步集合。当发生

同步

事件时，将调用视图上的

呈现

函数，因为它是

列表

函数中的最后一个参数。为确保将视图插入文档，您可以更改将函数渲染到：

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

---

请记住，如果要链接视图渲染调用，最好在完成所有链接后执行文档插入

$（“#app”）.append（this.$el）；

（为了防止多个文档回流，在本例中，为了简单起见，我将这一行放在渲染函数中。

要将mu的正确建议放在答案中，重要的是要理解“A”在AJAX中代表异步，这意味着当您执行提取时，客户端JavaScript会继续执行。它不会阻止并等待提取返回。因此，尽管您的代码如下所示：

取回集合

接收收集项目作为响应

创建视图

视图中的渲染集合：）

您实际上正在经历：

取回集合

创建视图

在视图中呈现空集合：(

接收收集项目作为响应（那里发生了什么？）

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

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

此代码现在表示视图正在侦听

“同步”

集合上的事件，表示何时从服务器成功同步集合。当发生

同步

事件时，将调用视图上的

呈现

函数，因为它是

列表

函数中的最后一个参数。为确保将视图插入文档，您可以更改将函数渲染到：

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

---

请记住，如果要链接视图渲染调用，最好在完成所有链接后执行文档插入

$（“#app”）.append（this.$el）；

（为了防止多个文档回流，为了简单起见，在本例中，我将这一行放在渲染函数中。

fetch

是一个AJAX调用，当您尝试使用集合时，服务器没有响应，因此没有任何有用的事情发生。您需要绑定集合中的事件并渲染以响应事件。仅供参考，您可以使用

感谢@n3rd的提醒。它与示例有任何关系吗？@batmanbegins不，它不是：）我想你可能想知道。
fetch
是一个AJAX调用，当你尝试使用集合时，服务器没有响应，因此没有任何有用的事情发生。你需要绑定集合中的事件并呈现以响应事件。仅供参考，你可以使用
感谢@n3rd的提醒。这与示例有任何关系吗？@batman开始不，不是：）我想你可能想知道。嗨，dcarson谢谢你的清晰简洁的解释。它起作用了。不客气，我很高兴它起到了作用。当你得到代表时，请随意更新答案：）嗨，dcarson谢谢你的清晰简洁的解释。它起作用了。不客气，我很高兴它起到了作用。当你得到代表时，请随意更新答案：）