javascript - 将更多数据添加到现有模型 (backbone.js)

Question

为集合完成的初始 fetch 检索每个模型的部分详细信息。当用户单击网页上的某个项目时，它需要检索该项目的更多详细信息并将其显示给用户。

用于返回该项目初始提取中缺失的附加数据的 API 函数已经实现 (/api/full_details)。

问题:我应该如何检索附加项并将其附加到现有模型？我的理解是，如果我执行 model.fetch()，该模型中的现有数据将会消失。我认为如果模型的 fetch() 有一个选项 {add:true} 就像集合的 fetch() 一样，那将成为我在这里需要的。

型号

Listing = Backbone.Model.extend({
});

收藏

ListingCollection = Backbone.Collection.extend({
    model: Listing,
    url: '/api/search'
});

查看

ListingListView = Backbone.View.extend({ ........ });

ListingView = Backbone.View.extend({
    events: {
        'click': 'getFullDetails'
    },

    getFullDetails: function() {
        // What should I do here?
    }
})

路由器中的某处

this.listingList = new ListingCollection();
var self = this;
this.listingList.fetch({
    data: {some:data},
    processData: true,
    success: function() {   
        self.listingListView = new ListingListView({ collection: self.listingListNew });
        self.listingListView.render();
    }

Answer 1

我可能会为此使用两个单独的模型:

1. 您现有的模型将成为 ListingSummary，您的集合将包含 ListingSummary 实例。
2. 为完整版本创建一个新的Listing(或ListingFull)模型。这将由 /api/full_details 支持。

您可以使用摘要模型中已有的信息来初始化完整模型:

var ListingSummary = Backbone.Model.extend({
    //...
    getListing: function() {
        if(!this._full) {
            this._full = new Listing({ summary: this });
            this._full.fetch();
        }
        return this._full;
    }
});

然后是完整版:

var Listing = Backbone.Model.extend({
    initialize: function() {
        if(this.options.summary) {
            // Copy the interesting bits from this.options.summary.attributes
            // to this.attributes, possibly using this.set()
        }
    }
});

然后您的完整 ListView 可以检查其 Listing 是否已完全加载:如果是，则 View 可以显示完整列表，但如果模型尚未全部加载，则 View 可以显示在等待服务器以完整的 Listing 模型响应时，那里有什么并抛出一个 spinner/loader/throbber/whatever-you-call-it；您的 View 将像往常一样列出模型中的事件，以了解一切准备就绪的时间。

您可以对现有的 Listing 模型做同样的事情，您只需触发一个原始的 $.ajax 调用，而不是使用单独的模型:

loadFullModel: function() {
    if(this._fullyLoaded)
        return;
    // Call out to /api/full_details ...
    var _this = this;
    $.ajax({
        //...
        success: function(data) {
            // Do things with data...
            _this._fully_loaded = true;
            // Trigger your event...
        }
    });
}