1

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

我正在使用主干 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());
4

2 回答 2

2

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

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

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

于 2013-08-25T22:52:26.990 回答
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
于 2013-08-26T05:13:29.493 回答