主干视图渲染中的 getJSON 问题

Question

我对 Backbone.js 还很陌生，到目前为止我很喜欢它，但是我在尝试获取要呈现的关系数据时遇到了一些麻烦。

在我的 Backbone 视图（称为 ImagesView）中，我有以下代码：

// Render it
render: function () {

  var self = this;

  // Empty the container first
  self.$el.html("")

  // Loop through images
  self.collection.each(function(img){

    // convert `img` to a JSON object
    img = img.toJSON()

    // Append each one
    self.$el.append(self.template(img))

  }, self)
}

集合中有 3 张图片，它们使用上述代码正确模板化。 img 对象中有一个 user 属性，其中包含用户 ID。我正在尝试返回用户的详细信息，并在模板中使用这些而不是 ID。我正在使用以下代码：

// Render it
render: function () {

  var self = this;

  // Empty the container first
  self.$el.html("")

  // Loop through images
  self.collection.each(function(img){

    // convert `img` to a JSON object
    img = img.toJSON()

    /* New code START */

    // Each img has a `user` attribute containing the userID
    // We'll use this to get their details
    $.getJSON('/user/' + img.user, {}, function(json, textStatus) {
      img.photographer = {
        id: json.id,
        username: json.username,
        real_name: json.real_name
      }

      /* Moved 1 level deeper */
      // Append each one
      self.$el.append(self.template(img))
    });

    /* New code END */

  }, self)
}

当我这样做时，用户的详细信息被正确返回并插入到模板中，但我现在以完全随机的顺序返回每个图像中的 3 个而不是 1 个（即总共 9 个）。我究竟做错了什么？我愿意使用 Backbone 方法而不是 getJSON，如果这会使它更容易，我只是无法让它自己工作。我使用 underscore.js 作为模板

Answer 1

随机顺序可能是由于请求以非常接近的间隔被触发并且响应返回的响应超出了它们被触发的顺序。我不确定您为什么会得到多个东西，但是如果您的模板呈现所有内容你打了 3 次，可能是这样吗？

无论如何，我认为你出错的地方是将加载数据的责任放入渲染方法中。您希望将其抽象化，以便在数据关注点和模板关注点之间有良好的分离。由于数据的顺序很有趣，您需要在渲染之前加载所有 3 个请求。根据在加载此数据之前是否有足够的数据来呈现视图，您可以采取两种不同的方法：

如果您在渲染视图之前等待所有数据，那么您可能希望在加载数据时渲染一个不同的视图（或该视图的模板），然后将其替换为一次显示所有数据的视图它已加载。

如果您有足够的数据来渲染视图并且您正在加载的内容是补充性的，您会希望使用您在渲染中的数据来渲染视图，然后在加载其他数据后使用自定义方法来修改渲染视图以包含您的数据。

如果您想知道所有 3 个请求何时完成，您可以使用 http://api.jquery.com/jquery.when/