在 Backgrid 中，如何使用选择输入更改 pageSize？答案

【问题标题】：In Backgrid, how can I change pageSize with a select input?在 Backgrid 中，如何使用选择输入更改 pageSize？
【发布时间】：2013-06-25 05:52:55
【问题描述】：

我正在尝试向 Backgrid.Grid 添加一个选择框，以触发一个将状态重置为用户选择的值的函数：{pageSize}。但我不知道如何或在何处将事件绑定到网格。

我的理解是元素需要成为视图的一部分（我相信是Backgrid.Grid），所以我将选择框添加到网格的页脚并给它一个id并尝试添加一个事件参数和匹配的功能，但它什么也不做。

所以，在我的页脚中，我有

select id="changePageSize"

在网格中

events: {
    'change #changePageSize' : 'changePageSize'
},
changePageSize: function(){ console.log('hooray!');}

我相信我的方法在这一点上是完全错误的，但找不到任何东西可以引导我走上正确的道路。

【问题讨论】：

标签： backbone.js backgrid

【解决方案1】：

我最终做的是将事件侦听器和函数添加到 backgrid-paginator 扩展。

将选择框添加到 _.template('...

_.template('...<div class="page-size"><select name="pageSize" class="pageSize"><option...');

在我添加的事件下：

'change select.pageSize' : 'changePageSize'

然后创建函数：

changePageSize: function(e){
    e.preventDefault();
    this.collection.state.pageSize = Math.floor(e.currentTarget.value);
    this.collection.reset();
},

让这个函数和它的显示可选并且允许开发者分配一个数组来生成自定义选项值是有意义的。当我有时间的时候。

【讨论】：

【解决方案2】：

关于 Duffy Dolan 的回答：在你的例子中一切都很好，除非你在让我们说在第三页上并选择只在一个页面上显示所有结果，你会得到一个错误。

您只需要添加： this.collection.getPage(1); // 它总是选择第一页

【讨论】：