Question

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

我在我的应用程序中使用Backbone Paginator进行分页支持以及使用Gmaps在gmaps上渲染位置，每次我从服务器显示5条记录并在地图视图中显示相应的5位置，所以现在我需要当我点击分页链接（上一页，下一页）时显示地图上的其余位置，我想我需要写一些点击事件，但我不知道在哪里写以及如何写这个事件，任何人都可以请帮我。请查看下面的代码，我写过evnets，但那些不起作用

提前致谢

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（＆＃34; templates＆＃34;文件夹）页面中包含页脚标记所包含的分页链接。

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

然后转到相应的homeview.js视图文件（＆＃34; views＆＃34;文件夹）

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。

绑定到点击事件不会起作用，因为您需要确保已从服务器获取模型，然后才能访问其数据。

您可以绑定到您的收藏品＆＃39; 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.PageableCollection调用我自己的函数（callGmap）来解决这个问题，这是我的新代码

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

  });

Backbone Paginator点击事件

3 个答案: