Javascript 主干模板数据显示在console.log中，但不显示在第页

我是主干网新手，我已经从Instagram中获取了一组数据，并通过简单地将其附加到容器（在下面的代码中注释掉）将其输出到页面上。但是，我想使用模板系统来处理输出。这就是它崩溃的地方，我现在开始认为我甚至没有正确地设置它。我觉得视图中的

fetchData

方法应该是，而

render

方法中的循环应该是属于集合的方法

撇开正确的实践不谈，我面临的主要问题是，当我试图将数据传递给模板时，结果是空白的。但是，当我从模板中输入console.log时，我可以看到所有必要的信息

这是我的JS文件

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;

var social={}
/*
*
*模型
*
*/
social.Instagram=Backbone.Model.extend（）；
/*
*
*收藏
*
*/
social.InstagramFeed=Backbone.Collection.extend({
型号：社交。Instagram，
网址：'https://api.instagram.com/v1/users//media/recent/?client_id=',
解析：函数（响应）{
返回响应；
},
同步：功能（方法、模型、选项）{
变量参数=389;.extend({
键入：“GET”，
数据类型：“jsonp”，
url:this.url，
processData:false
}，选项）；
返回$.ajax（参数）；
}
});
/*
*
*观点
*
*/
social.InstagramView=Backbone.View.extend({
el:“#社交”，
提要：{}，
初始化：函数（）{
this.collection=new social.InstagramFeed（）；
this.collection.on（'sync'，this.render，this）；
这是fetchData（）；
},
render:function（）{
var图像={}；
//var图像=“”；
for（var i=0；i

模板文件

<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>

“>//这不起作用
//这很有效

---

我的思路是否正确？我是否应该重新构建控制器和视图之间的逻辑？

因此，以下是用户2989731的解决方案：

---

在模板脚本之前加载脚本时出现问题。当脚本加载到页面底部时，该问题开始工作

是的，这没有帮助。而item.get（'photo'）返回一个类型错误，表示item.get（）不是函数什么作用

console.log（item.photo）

print to console（打印到控制台）？我很迟钝，一切正常。问题是在模板脚本之前加载脚本时出现的。当我将脚本加载到页面底部时，它开始工作