Question

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

我正在使用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

您需要在模型上设置处理程序。像这样：

friendModel.on('change', function() { friendView.render(); });
friendCollection.on('change', function() { friendListView.render(); });

或者更好的是，将这些行放在friendModel和friendCollection的构造函数中（参见http://backbonejs.org/#View-constructor）。

Answer 2

默认情况下，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

Backbone - 将JSON加载到集合中将不会在视图中呈现

2 个答案: