4

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


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


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

楷模

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

意见

  • DocumentCollectionView(仅显示文档名称和最后修改日期)
  • DocumentView(包括文件名称、描述和文章)
  • ArticlesViewArticleView用于显示单个或一组文章

目标

我想让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 回答