Backbone Paginator click event

Question

I am new to backbone and am using backbone in my rails application . This is what I am doing in my application

I am using Backbone Paginator for pagination support in my application as well using Gmaps for rendering locations on gmaps , for each time I am displaying 5 records from the server with pagination and displaying corresponding 5 location in map view , so now I need to show the remaining locations on map when I click on paginated links (prev page , next page) , I think I need to write some click events , but I am not sure where to write and how to write this events , Can any one please help me . please review the code below I have written evnets but those are not working

Thanks in advance

var Listings = Backbone.PageableCollection.extend({
    model: Bdemo.Models.Listing,

    mode: "server" ,

    url: '/listings' ,

    events: {
      "click #paginationSelect" : "fetchSelectedData"
    },

    fetchSelectedData: function(){
      console.log("CAMEEEEEEEEEEEEEEEEEEEEEEEEEEE")
    },

    // Initial pagination states
    state: {
      pageSize: 3,
     /* sortKey: "updated",*/
      order: 1
    },


    queryParams: {
      totalPages: null,
      totalRecords: null,
      sortKey: "sort"
    },



    parseState: function (resp, queryParams, state, options) {
      return {totalRecords: resp.total_pages};
    },


    parseRecords: function (resp, options) {
      return resp.listings;
    }

  });

provide at least your existing code – apneadiving Jun 12 '14 at 06:07 — apneadiving, Jun 12 '14 at 06:07

score 0 · Answer 1 · answered Jun 12 '14 at 08:38

@ratnakar:

All you need is events function. Set an id for each of your paginated links. Then include the events function. I hope that you're developing SPA(single page application). With that note assume the following settings.

In the homeview.js("templates" folder) page include the paginated links enclosed by the footer tag.

<footer>
  <button id="prevPage">previous</button> 
  <button id="nextPage">next</button>
</footer>

then the go to the corresponding homeview.js view file("views" folder)

backboneApp.Views.homeview = Backbone.View.extend({        

//Default "events" function for handling delegate events.
events:{

   //catching click events
    "click #prevPage" : "goPrevious" //on click of DOM which has id as prevPage, calling a function goPrevious.
    "click #nextPage" : "goNext" //same as above call goPrevious function. 
},

 //Defining the user created function goPrevious and goNext.

 goPrevious: function(){
  //Make your server call here.... for the previous 5 records.
  },
 goNext: function(){
  // server call here for the next 5 records.
  }

 });

Thus the basic idea of using delegate events for paginated links is defined above.

In my case I am not rendering index view using backbone template , it is just rendering using backbone paginator ... So I need to do magic with backbone paginator not with backbone index template .. thanks for you reply — ratnakar, Jun 12 '14 at 09:15

burtyish · Answer 2 · 2014-06-12T09:50:25.810

From your question I understand that you are using backgrid-paginator in server mode.

Binding to the click event won't work, because you need to make sure that the models have been fetched from the server before you can access their data.

You can bind to your collections' request event and act on the xhr.done()

In your view:

initialize: function() {
    this.listenTo(this.record_collection, "request", this.onCollectionRequested);
},

onCollectionRequested: function(collection, xhr, options) {
    _this = this;
    xhr.done(function(){
        _this.showRecordLocationsOnMap(collection);
    })
},

showRecordLocationsOnMap: function(records) {
    /* Update your map here */
}

Yes I am using backgrid paginator – ratnakar Jun 12 '14 at 09:19 — ratnakar, Jun 12 '14 at 09:19

score 0 · Accepted Answer · answered Jun 12 '14 at 09:59

Hi finally solved this by calling my own function(callGmap) from Backbone.PageableCollection , here is my new code

var Listings = Backbone.PageableCollection.extend({
    model: Bdemo.Models.Listing,

    mode: "server" ,

    url: '/listings' ,

    events: {
      "click #paginationSelect" : "fetchSelectedData"
    },

    fetchSelectedData: function(){
      console.log("CAMEEEEEEEEEEEEEEEEEEEEEEEEEEE")
    },

    // Initial pagination states
    state: {
      pageSize: 3,
     /* sortKey: "updated",*/
      order: 1
    },


    queryParams: {
      totalPages: null,
      totalRecords: null,
      sortKey: "sort"
    },



    parseState: function (resp, queryParams, state, options) {
      return {totalRecords: resp.total_pages};
    },


    parseRecords: function (resp, options) {
      callGmap(resp.hash);
      return resp.listings;
    }

  });

IMO it's bad practice to bind your collection to events triggered by DOM elements. That's what Backbone views are for. Anyway, if you've answered your own question, you should mark it as the answer. — burtyish, Jun 12 '14 at 10:04
Oh ..thanks .. but can I write events function in the above code .. I written but it was not worked ... — ratnakar, Jun 12 '14 at 10:09

Backbone Paginator click event

3 Answers3