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

jcv*_*dan 0 javascript backbone.js

我在初始页面加载时在我的主干应用程序中引导所有重要数据.这主要是收藏品.我在一个我正在打电话的问题上已经被困了一段时间,collection.get(id)undefined即使我知道有一个带有ID传递ID属性的模型,它仍然会返回.

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

您可以从控制台中看到下面打印出的集合确实有模型,这些模型具有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
Run Code Online (Sandbox Code Playgroud)

我使用JSON对象数组引导数据,这些对象在页面加载时写入我的索引页面.我认为这就是你所要做的一切,Backbone会假设一个名为'ID'的属性是模型的ID,并会相应地解释.

我在想这个/我做错了吗?

mu *_*ort 6

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

ID: 1
Run Code Online (Sandbox Code Playgroud)

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?'   }
]);
Run Code Online (Sandbox Code Playgroud)

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

或者你可以告诉你的模型中使用了不同的属性id,通过使用idAttribute:

idAttribute model.idAttribute

模型的唯一标识符存储在id属性下.如果您直接与使用不同唯一键的后端(CouchDB,MongoDB)进行通信,则可以将模型设置为idAttribute从该键透明地映射到id.

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

模型的唯一标识符存储在id 属性下.

避免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?'   }
]);
Run Code Online (Sandbox Code Playgroud)

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