1

我是骨干新手，在我的 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;
    }

  });
4

3 回答 3

0

@ratnakar：

您所需要的只是事件功能。为每个分页链接设置一个 id。然后包括事件函数。我希望您正在开发 SPA（单页应用程序）。使用该注释假设以下设置。

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

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

 });

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

于 2014-06-12T08:38:26.467 回答
0

嗨，终于通过从 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;
    }

  });
于 2014-06-12T09:59:56.257 回答
0

根据您的问题，我了解到您在服务器模式下使用 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 */
}
于 2014-06-12T09:14:52.953 回答