如何正确使用Backbone.js集合来显示列表

时间:2012-12-02 21:38:56

标签: javascript backbone.js

我刚开始使用Backbone并且对某一点感到困惑。

我有一个显示文档列表的页面。

单击列表中的文档可打开完整文档进行编辑。

根据我的理解,在Backbone中对此列表进行建模的正确方法是作为文档模型的集合。

var DocList = Backbone.Collection.extend({
  model: document
});

然而,文档模型将很大,具有许多属性。该列表不需要显示所有这些信息。

我想知道是否更喜欢以下内容......

var ShortDoc = Backbone.Model.extend({});
var shortDoc = new Doc({ 
  id: id,
  title: docTitle 
});
var DocList = Backbone.Collection.extend({
  model: shortDoc
});

...其中shortDoc仅包含生成列表所需的属性。

或者最好是将Collection与文档Model一起使用?

先谢谢你的帮助

2 个答案:

答案 0 :(得分:4)

请注意,您可以为同一型号编写多个Backbone.View。虽然您可能有一个显示整个文档的DetailView,但您也可以自由创建ItemView以在列表视图中展示每个文档的重要部分。虽然您的DetailView将包含厨房水槽,但ItemView可能仅限于展示标题:

var MyItemView = Backbone.View.extend({
  tagName: 'li',
  render: function () {
    this.$el.html('<h3>' + this.model.get('title') + '</h3>');
    return this;
  }
});

最后,如果您关注的是数据的数量:许多Backbone应用程序选择为应用程序中使用的每种类型的模型保留一个集合。他们的国家需要维持在某个地方;为什么不在一个漂亮,有组织的名单?在加载应用程序时,您无需引导每个模型属性。您可以选择加载标题(或者您需要呈现初始列表的任何内容),并推迟获取模型,直到用户请求任何详细信息。

答案 1 :(得分:0)

您的问题标题中有3个不同的概念(类,实例和数据表示)。

您的定义应该是这样的:

var Doc = Backbone.Model.extend({});
var DocList = Backbone.Collection.extend({
    url: '/docs',
    model: Doc
});

如果您没有默认值,则此执行阶段没有数据。然后你开始使用可以拥有完整数据集(或者只是其中一些数据)的模型来填充你的集合,或者通过创建客户端:

var myDocList = new DocList();
myDocList.create({title: 'The first doc'}); 
/* no need for an id here if you're using centralized persistence, because 
"create" calls "save" witch in turn does an http post to your server which 
should return a JSON representation of your model including its id (Backbone 
will include it in your model). */

或阅读服务器端:

var myDocList = new DocList();
myDocList.fetch();
/* Backbone will do an http get at DocList.url and create Doc instances with the
   JSON array it should receive from your server*/

至于你的docList的表示,如果它是长的或复杂的HTML,你真的应该把你的项目附加到新创建的元素然后将这个元素附加到你的文档,它可以很容易比重新绘制快10倍对于每个项目。