我是整个 Backbone 的新手(实际上我还不是一个 JavaScript 程序员),而且我遇到了过滤器表单的问题。
基本上我有一个数据库,我的骨干集合从中填充。在页面上,有一个过滤器部分,我可以在其中选中以下内容:“作业状态:正在运行、已完成、失败等……”或输入“用户名:test0”。在我开始对结果进行分页之前,这一切都很好。
我设置了一个路由器来处理#page/:page。这也有效,假设我在没有检查过滤器的情况下转到第 2 页,然后在第 2 页我检查了一些过滤器(现在使用导航(page/1)将我的结果设置回第 1 页),当我点击我的后退按钮,我回到第 2 页(因为那是我最后一次没有过滤结果的地方),但我的过滤器框仍然处于选中状态。
因此,如果每页有 10 行,并且我有 14 个没有过滤器的结果。我转到第 2 页查看结果 11-14,检查一个过滤器,该过滤器将我返回到第 1 页,总共有 5 个结果,然后我回击。我现在在那些过滤结果的第 2 页上,看到第 11-5 行,共 5 行...
无论如何,历史是否会记住表单复选框和其他输入?因此,如果我回击我描述的情况,它会转到第 2 页,但表单过滤器会像以前一样被删除。
我在想我必须为表单上的每个值使用路由......但希望有更好的方法来做到这一点(希望也不要重写整个代码)。
任何帮助表示赞赏。
我有两个主要的输入视图:一个与过滤器表单相关联,一个用于分页选择。过滤器表单视图为结果调用另一个视图(与行集合相关联)。
这是过滤器表单视图:
var FilterForm = Backbone.View.extend({
events: {
"submit": "refreshData",
"change input": "refreshData"
},
initialize: function () {
this.refreshData();
},
refreshData: function () {
Backbone.history.navigate('page/1');
pageNumberModel.set('pageNumber', 1);
this.newPage();
},
newPage: function () {
var pageNumber = pageNumberModel.get('pageNumber');
var rowsPerPage = pageNumberModel.get('rowsPerPage');
var startRow = ((pageNumber * rowsPerPage) - rowsPerPage) + 1;
var endRow = startRow + (rowsPerPage - 1);
$('#startrow').val(startRow);
$('#endrow').val(endRow);
var inputData = this.$el.serializeArray();
var inputDatareduced = _(inputData).reduce(function (acc, field) {
acc[field.name] = field.value;
return acc;
});
$.get("Database.aspx", inputData, function (outputData) {
jobQueueRows.set($.parseJSON($.parseJSON(outputData)['JobQueue']));
jobQueueRowsView.render();
pageNumberModel.set($.parseJSON($.parseJSON(outputData)['Pagination']));
pageNumberView.render();
rowNumberView.render();
});
}
});