javascript - 主干 - 将 JSON 加载到集合中不会在 View 中呈现

Question

我似乎无法获取正在加载到我的 FriendsCollection 中的 JSON 以呈现到 FriendListView 中。我可以看到它正在通过网络面板加载，我可以将数据记录到控制台，但由于某种原因，获取命令没有将数据传递到要呈现的 View 。

我正在使用 Backbone 1.0。

我正在使用的代码在 jsbin 上可用:http://jsbin.com/OHePaki/1/edit?html,js,output

// MODELS
var ArtifactModel = Backbone.Model.extend({
    initialize: function() {
        this.on('reset', function(){ artifactView.render() })
    },
    defaults: {
        "text": "Unknown Text",
        "timestamp": "Unknown timestamp"
    }
});
var artifactModel = new ArtifactModel();

// COLLECTIONS
var ArtifactCollection = Backbone.Collection.extend({
    model: ArtifactModel,
    url: '/getDigest.json',
    // url: 'http://we365.local/Artifact/GetShareableArtifact?token=b88d2640826bb8593f6edb308ce604f28225f240&artifact_id=2&social_site=tw&log_inside=&go',
    parse: function(data) {
        console.log('running parse');
        return _.map(data.response.content, _.identity);
    },
    initialize: function(){
        this.on('reset', function(){ artifactListView.render(); }),
        console.log('running init function for ArtifactCollection');
        this.fetch();
        //this.reset(artifactjson, { parse: true });
        console.log(this.toJSON());
    }
});
var artifactCollection = new ArtifactCollection();


// VIEWS
    var ArtifactView = Backbone.View.extend({
        tagName: 'li',
        className: 'single-model',
        render: function(){
            var template = Handlebars.compile($('#stream_getDigest').html());
            this.$el.html(template(this.model.toJSON()));
            return this;
        }
    });

    var ArtifactListView = Backbone.View.extend({
        initalize: function(){
            this.collection.on('add', this.addOne, this);
        },
        render: function(){
            this.collection.forEach(this.addOne, this);
        },
        addOne: function(artifactModel){
            var artifactView = new ArtifactView({model: artifactModel});
            this.$el.append(artifactView.render().el);
        }
    });


// rendering
var artifactView = new ArtifactView({model: artifactModel});
var artifactListView = new ArtifactListView({collection: artifactCollection});

artifactView.render();
artifactListView.render();

$('#list').html(artifactListView.$el.html());

Answer 1

默认情况下，jQuery ajax 调用是异步的，代码将继续运行而无需等待 .fetch() 完成。在您的代码中，view 在集合准备好之前呈现，因此 view 的数据为空。

您可以将 jQuery ajax 选项传递给 fetch 函数，这样您就可以执行以下操作 (http://backbonejs.org/#Collection-fetch):

...
initialize: function(){
    this.on('reset', function(){ artifactListView.render(); }),
    console.log('running init function for ArtifactCollection');
    this.fetch({async:false});
    console.log(this.toJSON()); //This will log the loaded collection
}
...

或者您可以更改抓取策略以利用异步加载:

this.fetch().done(function(){
    //Things to do after collection is loaded
});
//this's not good to use in init function