为什么Backbone.Model.fetch（）在包装器中返回数据？

Question

Let's say I have a Backbone.js model:

// I declare it...
var Foo = Backbone.Model.extend({
  url: '/resources/foo',
  defaults: {
    bar: true
  }
});

//  Construct it...
var foo = new Foo({});

// Locally set a value,
foo.set('floozy', true);

// And then fetch more data on it from the server.
foo.fetch();

Now say the server returns an object:

{
  id: 1
  bar: false,
  floozy: false
}

If I inspect the model contents on fetch success,

foo.fetch({ success: function(){
  console.log(this.toJSON());
}});

And inspect the model in firebug, the object looks like this:

{
  0: {
    id: 1,
    foo: false,
    floozy: false,
  },
  foo: true,
  floozy: true
}

In other words, instead of updating my existing values, it wraps the whole response in an unnamed object ( 0 ). I have not figured out why this is happening and I am stumped. Why does this happen / what am I doing wrong?

Answer 1

Your server is not returning what you think it is, it is returning an array with a single element like this:

[{"id":1,"bar":false,"floozy":false}]

This part of your result is a dead give away:

0: { ... }

That looks like a single element array that has been interpreted as a simple key/value object. I also know this because I can replicate your results at jsfiddle.net like this:

var json = JSON.stringify([{id: 1, bar: false, floozy: false}]);
var M = Backbone.Model.extend({
    url: '/echo/js?js=' + encodeURIComponent(json),
    defaults: {
        bar: true
    }
});

var m = new M;
m.set('floozy', true);
m.fetch({
    success: function(m) {
        console.log(m.toJSON());
    }
});

that results in the oddly familiar:

0: Object
    bar: false
    floozy: false
    id: 1
bar: true
floozy: true

in the console.

Demo: http://jsfiddle.net/ambiguous/QF8ue/

You can get around this by either fixing the server code or adding a parse to your model:

parse: function(response) {
    return _(response).isArray()
         ? response[0]
         : response;
}

I threw in an _.isArray call so that your model can work with both wrapped and unwrapped data.

Demo: http://jsfiddle.net/ambiguous/atSDp/