【问题标题】:Backbone.js collection fetch, can't retrieve itemsBackbone.js 集合获取,无法检索项目
【发布时间】:2013-01-08 02:33:57
【问题描述】:

我是 Backbone.js 的新手,我正在学习一个试图使其适应我的需求的教程。
我正在从主应用程序视图调用 fetch 方法,以便检索要插入到集合中的多个对象。 我可以在 chrome 中看到返回了 json 数据,fetch 函数返回成功但未填充集合。

我正在使用 IcanHaz 进行渲染。它只打印出我在 Job 模型中定义的默认模型。

 var Job = Backbone.Model.extend({
   defaults: {
        title: 'Not specified',
        status: 0,
        created_at: 'Not specified'
    }
 });


var JobView = Backbone.View.extend({
   render: function () {
        // template with ICanHaz.js (ich)
        this.el = ich.jobRowTpl(this.model.toJSON());
        return this;
    }
});

// define the collection of jobs
var JobCollection = Backbone.Collection.extend({
    model: Job,
    url: '/api/1.0/jobs/'
});


// main app, the collection view
var AppView = Backbone.View.extend({
    tagName: 'tbody', 

    initialize: function() {
        this.jobs = new JobCollection();
        this.jobs.on('all', this.render, this);
        this.jobs.fetch({
                           error: function () {
                             console.log("error!!"); 
                           },
                           success: function () {
                              console.log("no error"); 
                           }
                        }).complete(function () {
                            console.log('done');
                            console.log('length1:' +  this.jobs.length);
                        });
       console.log('length2: '+ this.jobs.length);
    },

    render: function () {
        this.jobs.each(function (job) {
            var tmpjob = new JobView({model: job}).render().el;
            $(this.el).append(tmpjob);
            console.log('job': + this.tmpjob);
        }, this);

        return this;
    }


});

var app = new AppView();
$('#app').append(app.render().el);

在 Chrome 控制台中,我得到了这个:

length2:0
job:undefined 
no error 
done 
Uncaught TypeError: Cannot read property 'length' of undefined //referring to the lenght1 logging

这些是我从 network/xhr/response 下的 chrome 检查器中获取的数据:

{"count": 2, "next": null, "previous": null, "results": [{"id": 1, "title": "testAlbum", "status": 0, "created_at": "2012-12-31"}, {"id": 2, "title": "testAlbum2", "status": 0, "created_at": "2012-12-31"}]}


我不明白为什么在调用 fetch 方法后存在“jobs”集合,但在调用“success”助手时它在 fetch 块内未定义。

为什么集合没有被填充,尽管它返回成功并且 json 数据是从服务器返回的?

我很迷茫。

【问题讨论】:

    标签: javascript rest backbone.js fetch backbone.js-collections


    【解决方案1】:

    parse 方法添加到您的集合中,该方法只返回results 数组。集合需要是模型数组,而不是整个 JSON 响应。

    Backbone docs解释如何使用parse

    【讨论】:

    • 谢谢,成功了!任何提示为什么我的集合对象的长度仍然等于零以及为什么当我尝试从 fetch 方法中的成功处理程序函数访问它时它是未定义的?这仍然是我控制台的结果:length2:0 job:undefined job:undefined no error done Uncaught TypeError: Cannot read property 'length' of undefined
    • 可能有几件事。一,complete 回调内部的this 不会是对视图的引用。您可以在 var 中保存对 this 的引用。我需要对此进行检查,但我不确定在获取完成后集合会完全更新。最好只监听集合上的change 事件。
    • 您在this 关键字上是对的。分配var that=this; 并在函数内部传递给使用它的完整函数就足够了:console.log('length1:' + that.jobs.length);。此外,length2 日志记录等于 0,因为所有 js 代码都将按顺序执行,但 fetch 调用是异步的,所以当我尝试 console.log('length2:' + this.jobs.length); 时,集合仍然是空的,因为 fetch 函数尚未完成。有道理,谢谢!
    猜你喜欢
    • 1970-01-01
    • 2013-07-01
    • 2011-11-08
    • 1970-01-01
    • 2011-11-30
    • 1970-01-01
    • 2011-11-20
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多