javascript - 使用页面加载数据引导 Backbone Collection 的正确方法

Question

我在初始页面加载时引导主干应用程序中的所有重要数据。这主要是收藏。我在一个问题上陷入了一段时间，我正在调用 collection.get(id) 但它返回 undefined 即使我知道一个带有 的模型传递的 ID 的 ID 属性已存在。

然后，当我检查控制台中的集合时，我注意到应包含模型 ID 数组的 _byId 数组是空的。

您可以从下面的控制台打印中看到该集合确实有模型，并且这些模型具有 ID 属性。

window.campaigns
child
  _byCid: Object
  _byId: Object
    __proto__: Object
  _callbacks: Object
  length: 32
  models: Array[32]
  models: Array[32]
  0: child
    _callbacks: Object
    _escapedAttributes: Object
    _pending: Object
    _previousAttributes: Object
    _silent: Object
    attributes: Object
    DateCreated: "23/05/2012"
    DateScheduled: ""
    DateSent: ""
    Description: null
    From: null
    ID: 1
    IsAllowed: false
    Message: null
    Name: "Some name"
    __proto__: Object
    changed: Object
    cid: "c0"
    collection: child
    __proto__: ctor
  1: child
  2: child
  3: child
  4: child
  5: child
  length: 6
  __proto__: Array[0]
  __proto__: ctor

我使用 JSON 对象数组引导数据，这些对象在页面加载时写入我的索引页面。我假设这就是您所要做的全部事情，并且 Backbone 会假设名为“ID”的属性是模型的 ID，并会进行相应的解释。

我的想法是否错误/我这样做是否正确？

Answer 1

我在你的模型中看到了这一点:

ID: 1

JavaScript 区分大小写，因此 id和 ID 是不同的东西； Backbone 默认情况下正在寻找 id，但不知道任何有关 ID 的信息。

如果您使用id，那么一切都会开箱即用:

​var M = Backbone.Model.extend({});
var C = Backbone.Collection.extend({
    model: M
});
​var c = new C([
    { id: 1, str: 'where'    },
    { id: 2, str: 'is'       },
    { id: 3, str: 'pancakes' },
    { id: 4, str: 'house?'   }
]);

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

或者您可以通过使用idAttribute告诉您的模型为id使用不同的属性。 :

idAttribute model.idAttribute

A model's unique identifier is stored under the id attribute. If you're directly communicating with a backend (CouchDB, MongoDB) that uses a different unique key, you may set a Model's idAttribute to transparently map from that key to id.

描述的第一句话可能更好地表述为

A model's unique identifier is stored under the id property.

避免 JavaScript 对象属性和 Backbone 模型属性之间的一些常见混淆。

例如:

var M = Backbone.Model.extend({
    idAttribute: 'ID'
});
var C = Backbone.Collection.extend({
    model: M
});
var c = new C([
    { ID: 1, str: 'where'    },
    { ID: 2, str: 'is'       },
    { ID: 3, str: 'pancakes' },
    { ID: 4, str: 'house?'   }
]);

演示:http://jsfiddle.net/ambiguous/3NhGV/