骨干分页器单击事件

Question

我是骨干网络新手，在我的rails应用程序中使用骨干网络。这就是我在我的应用程序中所做的

我用支柱Paginator分页支持在我的应用程序使用Gmaps Gmaps渲染位置,每一次我对分页显示从服务器5条记录并显示相应的5个位置在地图视图,所以现在我需要显示剩余的位置在地图上点击分页的链接(页上一页、下一页),我想我需要写一些点击事件,但我不知道在哪里写和如何写这个事件,有谁能帮帮我吗?请查看下面的代码，我已经写了事件，但这些都不工作

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

Answer 1

@ratnakar:

你所需要的只是事件函数。为每个分页链接设置一个id。然后包含事件函数。我希望您正在开发SPA(单页应用程序)。有了这个说明，假设以下设置:

在homeview.js("templates"文件夹)页面中包含由footer标签包围的分页链接。

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

然后转到对应的homeview.js视图文件("views"文件夹)

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

因此，上面定义了为分页链接使用委托事件的基本思想。

Answer 2

从您的问题中我了解到您在服务器模式下使用backgrid-paginator

绑定到click事件将不起作用，因为您需要确保在访问它们的数据之前已经从服务器获取了模型。

您可以绑定到您的集合的request事件并对xhr.done()进行操作

在你看来:

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 */
}

Answer 3

我最终通过从Backbone调用我自己的函数(callGmap)解决了这个问题。PageableCollection，这是我的新代码

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