骨干模板数据显示在console.log中，但不在页面上

Question

I'm new to Backbone and I've gotten as far as to grab a set of data from Instagram and output it onto a page by simply appending it to a container (commented out in the code below). However I'd like to utilize the templating system instead to handle the output. This is where it falls apart and I'm now beginning to think I don't even have this set up properly. I have a feeling to the fetchData method in my view should and the loop in my render method should be methods that belong to the collection instead.

Proper practices aside, the main issue I'm having is that when I attempt to pass data over to the template it comes out blank. However, I can see all of the necessary information when I console.log it from the template.

Here's my JS file

var social = {}

/*
*
* MODELS
*
*/
social.Instagram = Backbone.Model.extend();

/*
 *
 * COLLECTIONS
 *
 */
social.InstagramFeed = Backbone.Collection.extend({
  model: social.Instagram,
  url: 'https://api.instagram.com/v1/users/<USER_ID>/media/recent/?client_id=<CLIENT_ID>',
  parse: function(response) {
    return response;
  },
  sync: function(method, model, options) {
    var params = _.extend({
        type: 'GET',
        dataType: 'jsonp',
        url: this.url,
        processData: false
    }, options);
    return $.ajax(params);
  }
});

/*
 *
 * VIEWS
 *
 */
social.InstagramView = Backbone.View.extend({
  el: '#social',
  feed: {},
  initialize: function() {
    this.collection = new social.InstagramFeed();

    this.collection.on('sync', this.render, this);

    this.fetchData();
  },
  render: function() {
    var images = {};
    // var images = '';

    for(var i = 0; i < this.feed.length; i++) {
        var photo = this.feed[i].images.standard_resolution.url;
        var caption = this.feed[i].caption == null ? 'no caption' : this.feed[i].caption.text;
        var likes = this.feed[i].likes.count;
        var id = this.feed[i].id;

        // images += '<img src="'+photo+'" data-caption="'+caption+'" data-likes="'+likes+'" data-id="'+id+'" alt="">';
        images[i] = {'photo': photo, 'caption': caption, 'likes': likes, 'id': id};
    }

    // this.model = images;
    // $('#social').append(images);

    var template = _.template($('#instagram-template').html());
    this.$el.html(template({ collection: images }));

  },
  fetchData: function() {
    var self = this;
    this.collection.fetch({
        success: function(collection, response) {
            self.feed = response.data;
        },
        error: function() {
            console.log("failed to find instagram feed...");
        }
    });
  }
});

social.instagramview = new social.InstagramView;

Template File

<script type="text/template" id="instagram-template">
  <% _.each(collection, function(item) { %>
    <img src="<%= item.photo %>"> // this doesn't work
    <% console.log(item.photo) %> // this works
  <% }); %>
</script>

Am I on the right track? Should I look into restructuring the logic between my controller and view?

Answer 1

So here's the solution by user2989731:

The problem was occurring from loading the scripts before the template script. It started working when the scripts were loaded into the bottom of the page