Backbone Collection没有得到模型

时间:2013-11-07 03:44:53

标签: javascript backbone.js underscore.js backbone-collections

基本上,我正在尝试向我的节点服务器发送GET请求,以便我可以获取博客帖子来创建链接。我做了collection.fetch,成功完成了GET请求(节点服务器记录它正在发送正确的对象)。该模型成功解析了正确的数据,但是当我尝试使用该集合时,它表示它是空的。这是代码:

var mdm = mdm || {};

// MODEL
mdm.Post = Backbone.Model.extend({
        parse: function( response ) {
        response.id = response._id;
        console.log(response); // logs the two documents
        return response;
    }
});

// COLLECTION
mdm.Posts = Backbone.Collection.extend({
    model: mdm.Post,
    url: '/api/posts'
});

// MODEL VIEW
mdm.LinkView = Backbone.View.extend({
    template: _.template( $('#link_template').html() ),

    render: function() {
        this.$el.html( this.template( this.model.toJSON() ));
        return this;
    }
});

// COLLECTION VIEW
mdm.LinksView = Backbone.View.extend({
    el: '#link_list',

    initialize: function() {
        this.collection = new mdm.Posts();
        this.collection.fetch({reset: true});
                // makes the request properly, but collection is empty
        this.render();
                // never gets called because the collection is empty
        console.log(this.collection.length); 
                // logs a length of 0
    },

    render: function() {
        // renders collection
    }
});

$(function() {
    new mdm.LinksView();
});

数据正在发送并在模型中解析,因此我不确定该集合最终是空的。任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:1)

您在视图中看不到模型的最可能原因是因为渲染是在异步fetch完成之前发生的。

下面的内容会更好:

mdm.LinksView = Backbone.View.extend({
    el: '#link_list',

initialize: function() {
    this.collection = new mdm.Posts();
    this.listenTo(this.collection, 'reset', this.render);
    this.collection.fetch({reset: true});
}

上面的代码为reset上的collection事件设置了一个监听器,并在发生这种情况时执行render函数。

此外,您可以将successerror处理程序传递到fetch并手动调用渲染功能。

this.collection.fetch({
    success: _.bind(function() { 
        this.render(); }, this)
});

希望这有帮助!

答案 1 :(得分:0)

Per @ fbynite的评论,问题与fetch异步有关。我对集合视图进行了以下更改,它完成了诀窍:

initialize: function() {
    var self = this;
    this.collection = new mdm.Posts();
    this.collection.fetch({reset: true,
        success: function() {
            self.render();
            console.log(self.collection.length);
        }
    });
},

代码是Backbone教程的修改,因此其他用户可能会遇到类似的问题。 http://addyosmani.github.io/backbone-fundamentals/#exercise-2-book-library---your-first-restful-backbone.js-app