当获取响应为空数组时,Backbone Fetch成功回调未执行

时间:2016-12-08 19:17:08

标签: javascript backbone.js

我有Person模型,我正在视图中检索人员信息。当响应具有对象时,success回调FetchSuccess将执行。但是当响应为空时,不会调用回调。有什么猜吗?

Models.Basic = Backbone.Model.extend({
    parse: function(response) {
        return response;
    }
});

Models.PersonModel = Backbone.Model.extend({
    url: function() {
        return '/person/' + this.data.id;
    }
});

Backbone.View.extend({

    template: Templates['template'],

    initialize: function(options) {
        this.id = options.id;
        _.bindAll(this, 'FetchSuccess');

        this.personModel = new Models.PersonModel();
        this.model = new Models.Basic();
        this.fetchData();
        return this;
    },

    render: function() {
        this.$el.append(this.template(this.model.toJSON()));
    },

    fetchData: function() {
        this.personModel.data = {
            id: this.id
        };
        this.personModel.fetch({
            context: this,
            success: this.FetchSuccess
        });
    },

    FetchSuccess: function() {
        this.model.set({
            name: this.personModel.get('name');
        });
        this.render();
    }
});

1 个答案:

答案 0 :(得分:1)

this.personModel = new Models.PersonModel();

这是一个Backbone模型,而不是集合。

this.personModel.fetch({
    reset: true, // this doesn't exist on model
    success: this.FetchSuccess
});

您无法在没有id的情况下获取模型。此外,模型在获取时需要返回一个对象。

如果您想要获取特定的人,请为模型提供id,然后获取。

this.personModel = new Models.PersonModel({ id: "id_here" });
// ...
this.personModel.fetch({
    context: this,
    success: this.FetchSuccess
});

这里是带有更正的代码

// parse isn't needed if you're not going to parse something
Models.Basic = Backbone.Model.extend({});

Models.PersonModel = Backbone.Model.extend({
    urlRoot: 'person/', // this handles putting the id automatically
});

Backbone.View.extend({
    template: Templates['template'],

    initialize: function(options) {
        this.id = options.id;

        // pass the id here
        this.personModel = new Models.PersonModel({ id: this.id });

        this.model = new Models.Basic();
        this.fetchData();

        // makes no sense in the initialize since it's never called 
        // manually and never used to chain calls.
        // return this; 
    },

    render: function() {
        // render should be idempotent, so emptying before appending
        // is a good pattern.
        this.$el.html(this.template(this.model.toJSON()));

        return this; // this is where chaining could happen
    },

    fetchData: function() {
        // This makes no sense unless you've stripped the part that uses it.
        // this.personModel.data...

        this.personModel.fetch({
            context: this, // pass the context, avoid `_.bindAll`
            success: this.onFetchSuccess,
            error: this.onFetchError
        });
    },

    onFetchSuccess: function() {
        this.model.set({
            name: this.personModel.get('name')
        });
        this.render();
    },
    onFetchError: function() { this.render(); }

});

您可以使用error回调捕获错误,或者只是不执行任何操作并默认渲染,并在fetch上重新渲染。

您还可以收听模型事件(在initialize内):

this.listenTo(this.personModel, {
    'sync': this.FetchSuccess,
    'error': this.onFetchError
});
this.personModel.fetch();