javascript - 为什么 Backbone.Model.fetch() 在包装器中返回数据？

Question

假设我有一个 Backbone.js 模型:

// 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();

现在假设服务器返回一个对象:

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

如果我在获取成功时检查模型内容，

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

然后检查 firebug 中的模型，对象看起来像这样:

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

换句话说，它没有更新我现有的值，而是将整个响应包装在一个未命名的对象 (0) 中。我还没有弄清楚为什么会这样，我很困惑。为什么会发生这种情况/我做错了什么？

Answer 1

您的服务器没有返回您认为的内容，它返回的是一个包含单个元素的数组，如下所示:

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

结果的这一部分完全是泄露:

0: { ... }

这看起来像是一个被解释为简单键/值对象的单元素数组。我也知道这一点，因为我可以像这样在 jsfiddle.net 上复制您的结果:

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());
    }
});

这导致奇怪的熟悉:

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

在控制台中。

演示:http://jsfiddle.net/ambiguous/QF8ue/

您可以通过修复服务器代码或添加 parse 来解决这个问题到你的模型:

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

我输入了一个 _.isArray调用以便您的模型可以处理包装和未包装的数据。

演示:http://jsfiddle.net/ambiguous/atSDp/