Question

我试图使用骨干来抓住Instagram Feed。这并不需要对用户进行身份验证，而是通过以下方式提取公共Feed：

https://api.instagram.com/v1/users/<user_id>/media/recent/?client_id=<client_id>

我已经将JSON响应输出到控制台，但我无法在页面上显示它。

在下面的代码中，我使用fetchData来抓取Feed，并且我希望最终将它变为渲染输出#social上所有样式化的点。但是，尽管将feed属性设置为JSON响应，render仍然返回一个空对象。 console.log中的fetchData会显示正确的信息。

var social = {}

social.Instagram = Backbone.Model.extend();

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.results;
},
sync: function(method, model, options) {
    var params = _.extend({
        type: 'GET',
        dataType: 'jsonp',
        url: this.url,
        processData: false
    }, options);
    return $.ajax(params);
}
});

social.InstagramView = Backbone.View.extend({
el: '#social',
feed: {},
initialize: function() {
    this.collection = new social.InstagramFeed();
    this.fetchData();
    this.render();
},
render: function() {
    console.log(this.feed);
},
fetchData: function() {
    this.collection.fetch({
        success: function(collection, response) {

            // console.log(response);
            feed = response;
            // console.log(this.feed);

        },
        error: function() {
            console.log("failed to find instagram feed...");
        }
    });
}
});

social.instagramview = new social.InstagramView;

我已尝试仅使用fetchData功能输出信息，但this.el.append(response)会产生一条通知，指出el未定义。

Answer 1

在提取完成之前调用您的render方法。您应该绑定到集合的sync事件并在事件处理程序中调用render。

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

引用Backbone.js文档：触发了同步事件：

当模型或集合已成功与服务器同步时。

使用骨干与第三方api

1 个答案: