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

我可能会使用两个单独的模型：

您现有的模型将变为ListingSummary，您的收藏集将包含ListingSummary个实例。
为完整版本创建新的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()
        }
    }
});

然后您的完整列表视图可以检查其Listing是否已完全加载：如果是，则视图可以显示完整列表，但如果模型不是全部，那么视图可以显示其中的内容并在等待服务器响应完整的Listing模型时抛出一个微调器/加载器/ throbber /无论你怎么称呼它;像往常一样，您的视图会列出模型中的事件，以了解所有内容何时准备就绪。

您可以对现有的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...
        }
    });
}

向现有模型添加更多数据（backbone.js）

1 个答案: