Question

The initial fetch done for a collection retrieves partial details for each model. When the user clicks on an item on the webpage, it will need to retrieve more details for that item and display it to the user.

The API function to return the additional data missing in the initial fetch for that item has already been implemented (/api/full_details).

Problem: How should I retrieve the additional and append it to the existing model? My understanding is that if I do a model.fetch(), the existing data in that model will be gone. I think that if the fetch() for models have an option {add:true} like the fetch() for collections, that’ll be what I need here.

Model

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

Collection

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

View

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

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

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

Somewhere in the router

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

I’d probably use two separate models for this:

1. Your existing model would become ListingSummary and your collection would contain ListingSummary instances.
2. Create a new Listing (or ListingFull) model for the full versions. This would be backed by /api/full_details.

You could initialize full models using the information you already have in the your summary models:

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

and then over in the full version:

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

Then your full listing view could check if its Listing is fully loaded: if it is then the view could display the full listing but if the model isn’t all there yet, the view could show what is there and throw up a spinner/loader/throbber/whatever-you-call-it while waiting for the server to respond with the full Listing model; your view would, as usual, listing for events from the model to know when everything was ready.

You could do the same thing your existing Listing model, you’d just fire off a raw $.ajax call instead of using a separate model:

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