1

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

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

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

模型

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();
    }
4

1 回答 1

2

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

  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()
        }
    }
});

然后您的完整列表视图可以检查它Listing是否已完全加载：如果是，则视图可以显示完整列表，但如果模型还没有全部存在，则视图可以显示那里的内容并抛出一个微调器/加载器/在等待服务器以完整Listing模型响应时，颤抖/随便叫它；像往常一样，您的视图将列出模型中的事件以了解一切准备就绪的时间。

您可以对现有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...
        }
    });
}
于 2012-10-03T03:07:35.843 回答