4

我对 Backbone 比较陌生，我已经搜索了一段时间，但没有找到满足我问题的答案（这个很接近，但不确定它是否完全适用Backbone.js Master-Detail 场景）

tl; dr：如何表示集合的子集（仅在集合的某些模型字段中，而不是在分页/过滤中的子集）？（例如，仅显示名称和修改日期的列表视图，当详细信息不仅包括更多字段，还包括嵌套的子集合时）

现在到详细版本，这里是应用程序的结构：

楷模

  • DocumentCollection- 文档集合，应该只获取名称和最后修改日期
    • Document- 当作为集合提取的一部分提取时，应该只提取名称和修改日期，当提取“独立”（例如在详细信息视图中）时，还应该提取描述和子文章
      • ArticleColletion作为文档一部分的嵌套集合，仅应在获取详细信息视图中的文档时获取，但应该是“惰性的”并且在获取时不DocumentCollection获取
        • Article

意见

  • DocumentCollectionView（仅显示文档名称和最后修改日期）
  • DocumentView（包括文件名称、描述和文章）
  • ArticlesView并ArticleView用于显示单个或一组文章

目标

我想让DocumentCollection fetch方法调用只带Document模型的一个子集（只有名称和修改时间），并且在Document直接获取时，还要获取描述字段和子文章

现实世界的模型有点复杂，有更多的字段，所以我需要减少网络上的一些流量，而不是在需要之前加载字段或子集合。

可能的解决方案

  1. 覆盖 fetch 方法，并应用相关逻辑（例如，“完整”或“部分”加载的标志）

  2. 忘记惰性字段，只有嵌套集合惰性，切割未使用的字段是过早的和不必要的优化，并且不是模型的责任来决定需要什么和不作为视图渲染的一部分，它应该带来一切

  3. “摘要”视图有不同的集合和模型，例如DocumentSummaryCollection并扩展 DocumentCollection DocumentSummaryCollection？

问题

以上（如果有的话）是“骨干”的方式吗？还有其他方法吗？

4

2 回答 2

8

这是我不确定是否有“骨干”方式来处理的常见场景之一。这是一种可能的解决方案...

当您获取文档集合 ( /api/documents) 时，您会返回一些像这样的 json：

[{id: 1, name: 'foo'}, {id: 2, name: 'bar'}]

当你获取一个文档 ( /api/documents/1) 时，返回一些像这样的 json：

{
    id: 1, name: 'foo', description: 'some stuff about foo', 
    articles: [{id: 1, name: 'hello'}, {id: 2, name: 'hi again'}]
}

当获取单个 DocumentModel 时，将有一个新属性articles。您侦听该change:articles事件，并且set该新 jsonthis.articles是 ArticlesCollection。

现在......一些代码：

var Article = Backbone.Model.extend({});

var ArticleCollection = Backbone.Collection.extend({
    model: Article
});

var Document = Backbone.Model.extend({
    constructor: function() {
        // make sure articles collection is created.
        this.articles = new ArticleCollection();
        Backbone.Model.prototype.constructor.apply(this, arguments);
    },
    initialize: function(attributes, options) {
        this.articlesChanged();
        this.on('change:articles', this.articlesChanged, this);
    },

    // articles attribute changed.
    // set it into the Collection.
    // this way, existing models will be updated, new ones added.
    articlesChanged: function(){
        // if document was fetched and has articles json array,
        // set that json into this.articles collection.
        var articles = this.get('articles');
        if(articles){
            this.articles.set(articles);
            // remove 'articles' attribute now that it is set into the collection.
            this.unset('articles');
        }
    }
});

var DocumentCollection = Backbone.Collection.extend({
    model: Document
});

更多代码：

var docs = new DocumentCollection();
docs.fetch().done(function() {
    // docs now has documents with only name, date attributes, 
    // and empty articles collection.
    var doc = docs.at(0);
    var name = doc.get('name'); // foo
    var articleCount = doc.articles.length; // 0

    doc.fetch().done(function() {
        // first doc is now full, with articles, description, etc.
        doc.articles.each(function(article) { 
            console.log(article.get('name'));
        }, this);

        // re-fetch the collection later... to check if new documents exist.
        docs.fetch().done(function() {
            // new docs added, removed docs gone.
            // existing doc models updated.
        });
    });
});

我认为我喜欢这个的主要一点是，它保留了文档/文章集合实例，即使文档集合或单个文档稍后被重新获取。

因此，例如，如果您在详细信息视图中显示 DocumentModel 及其文章集合，并且重新获取整个 DocumentCollection，则显示的 DocumentModel 在获取之后仍将在集合中（除非它实际上已在服务器）。如果你有一些change add remove类型事件连接到这些实例，这很好。

随着 Backbone 1.0 转向“更新”获取（这很棒），我很好奇是否还有其他（或更好的）解决方案，因为这确实是一个非常普遍的问题......我真的没有经常使用这个确切的解决方案，我不确定它是否理想。我曾经使用parse更多来获取子 json 和子集合reset。但我认为我在更新 fetch 时遇到了一些问题，所以开始尝试这个。

于 2013-04-05T02:02:10.017 回答
0

我将构建我的服务以仅返回您需要的字段并使用集合的 parse 方法，从骨干文档..

    parsecollection.parse(response, options)

每当服务器返回集合的模型时，Backbone 都会在 fetch 中调用 parse。该函数传递原始响应对象，并应返回要添加到集合中的模型属性数组。默认实现是无操作的，只是通过 JSON 响应。如果您需要使用预先存在的 API 或更好的响应命名空间，请覆盖此选项。

在解析函数中，您可以迭代响应并使用返回的属性构建模型（id 必须在返回的属性中），然后可以在需要时使用完整模型获取这些模型。

于 2013-04-05T00:27:35.193 回答