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次可能是吗？

无论如何，我认为你出错的地方是将数据加载到render方法中。您希望将其抽象化，以便在数据问题和模板问题之间实现良好分离。由于数据的排序很有意义，因此您需要在渲染之前加载所有3个请求。您可以采用两种不同的方法，具体取决于在加载此数据之前是否有足够的数据来呈现视图：

如果您在渲染视图之前等待所有数据，那么您需要在加载数据时呈现不同的视图（或此视图的模板），然后将其替换为显示所有数据的视图它已加载。

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

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

Backbone视图呈现中的getJSON问题

1 个答案: