1

我是一般编码的新手，并且将 Backbone 与 Rails 一起学习。我在模板中迭代收集数据的尝试失败了，我不确定出了什么问题。加载网页时，似乎 json 数据和模板的一部分加载正常，但迭代位失败。这是代码：

收购.js：

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

收购.js：

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

收购索引.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>
4

1 回答 1

1

要将 mu is too short 的正确建议放入答案中，重要的是要了解 AJAX 中的“A”代表异步，这意味着当您进行提取时，客户端 JavaScript 会继续执行。它不会阻塞并等待获取返回。因此，虽然您的代码如下所示：

  1. 获取集合
  2. 接收收集项目作为响应
  3. 创建视图
  4. 在视图中渲染集合 :)

你实际上正在经历：

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

因此，正如 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);那么在完成所有链接之后进行文档插入可能会更好（以防止多个文档重排，但是为了简单起见，在本示例中我将这一行放在您的渲染函数中。

于 2013-07-11T20:32:08.247 回答