javascript - Backbone View 渲染中的 getJSON 问题

Question

我对 Backbone.js 还很陌生，到目前为止很喜欢它，但在尝试渲染关系数据时遇到了一些麻烦。

在我的 Backbone View (称为 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 个请求。您可以采取两种不同的方法来实现此目的，具体取决于在加载此数据之前您是否有足够的数据来呈现 View :

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

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

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