Backbone视图呈现中的getJSON问题

Question

I'm pretty new to Backbone.js, loving it so far, but I'm having a little trouble trying to get relational data to render.

Within my Backbone view (called ImagesView) I have the following code:

// 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)
}

There are 3 images in the collection, and they are templated correctly with the above code. Within the img object is a user attribute, containing the User ID. I'm trying to return the user's details, and use these within the template instead of the ID. I'm doing that using the code below:

// 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)
}

When I do this, the user's details are returned correctly and inserted into the template, but I now get 3 of each image returned instead of 1 (ie 9 in total), in a completely random order. What am I doing wrong? I'm open to using Backbone methods instead of the getJSON if that will make it easier, I just couldn't get it to work myself. I'm using underscore.js for the templating

Answer 1

The random order is likely caused by the requests being fired at very close intervals and responses returning out of the order they were fired in. I'm not sure why you're getting the multiple things, but if your template renders everything and you're calling that 3 times that could be it?

Anyway where I think you're going wrong is putting the responsibility of loading data into the render method. You'd want this to be abstracted so you have a good separation between data concerns and template concerns. As the ordering of the data is of interest, you'll want all 3 requests to have loaded before rendering. There's two different approaches you could take to this depending on if prior to loading this data you have sufficient data to render the view:

If you're waiting on all the data prior to rendering the view then you would want to render a different view (or template of this view) whilst the data is loaded and then replace that with a view showing all the data once it is loaded.

If you have sufficient data to render the view and what you are loading is supplementary, you'd want to render the view with the data you have in render and then once the other data is loaded use a custom method to modify the rendered view to include your data.

If you want to find out when all 3 requests are complete you can use http://api.jquery.com/jquery.when/