Change listener on collection (obviously listening models change)

Question

I have a tabular data view with ability to sort on each individual column. As data being huge, I prefer to show few rows in the page and load rows on demand. So wheneever user sorts a column in page, a new request is made to server and new data rows are fetched to display. But User can modify sort type(asc or desc) of two or more columns at a time with pop up page allowing it to modify sort type for more columns. I tried to solve this use case with a collection of metadata (asc/desc and other information) for columns.

    var ColumnsMetadata = Backbone.Collection.extend({
        model: ColMetadata
    });        
    var ColMetadata = Backbone.Model.extend({
        defaults: {
          sort: 'none'
        }
    });

A EditSortView page to present and edit the column sort info. And a TableView to display tablular data. The TableView and EditSortview both share ColumnsMetadata.

var EditSortView = Backbone.View.extend({
     initialize: function() {
        //this.colleciton = columnMetadataCollection
     },
     events: function() {
        "change input.sortVal" : "_updateSortMetdata",
        "click button#sort": '_sort'
     },
     _updateSortMetdata: function() {
       // updates right ColMetadata instance' sort property
     },
     _sort: funciton() {
        // should make fetch request only when user finally 
        // satisfy with sort order changes
     }
});
var TableView  = Backbone.View.extend({
     initialize: function() {
         // other set up code
         // i could add listener on collection
        this.listenTo(this.columnMetadataCollection, 'change', this._fetchAndUpdate);
     },
     _fetchAndUpdate: function() {
        // uses columnMetadataCollection to fetch data
     }
});

As I added change listener on columnMetadataCollection in TableView, for each colMetadata change (from EditSortView popup) would trigger a new request to server. But it is optimal to make only one request to server when user satisfies with changes made. How can I listen to columnMetadataCollection in TableView so that only a request is made to sever? Or how can I structure my code with Backbone to make it right?

score 0 · Answer 1 · answered Jan 30 '14 at 11:35

0

You might want to look into rate-limiting your requests, e.g. with TrafficCop. See http://lostechies.com/derickbailey/2012/03/20/trafficcop-a-jquery-plugin-to-limit-ajax-requests-for-a-resource/

The other option is to keep a reference to the xhr that is returned when you call (e.g.) fetch and abort the operation with resolveor fail(see http://api.jquery.com/category/deferred-object/)

answered Jan 30 '14 at 11:35

David Sulc

25,946
3
52
54

1

I read traffic cops plugin. It seems it creates `inProcess[key] = traffic` array of request and for each request verifies if the resourse in question is being already requetsed. If it is, it just add the success/error callbacks to that `traffic` object, will not create a new requset. It means when the first request returns executes all callbacks. But this is not the case here. Here I want that changes of all `colMetadata` model in collection to be sent to the server. Then only server can return correct set of rows. – ykjs121 Jan 30 '14 at 13:13

Change listener on collection (obviously listening models change)

1 Answers1