历史记录中的Backbone.js表单值
我对整个主干都是新手(实际上我还不是一个JavaScript程序员)，而且我遇到了过滤器表单的问题。
基本上，我有一个数据库，我的主干集合就是从这个数据库中填充的。在页面上，有一个筛选器部分，我可以在其中复选标记诸如："Jobstatus: Running，Completed，Failed等...“或者输入"User name: test0“。所有这些都很好用，直到我开始对我的结果进行分页。
我设置了一个路由器来处理#page/:page。这也同样有效，假设我在没有选中过滤器的情况下转到第2页，然后在第2页我检查了一些过滤器(现在通过使用导航( page /1)将我的结果设置回第1页)，当我点击后退按钮时，我返回到第2页(因为这是我最后一次没有过滤器结果的地方)，但我的过滤器框仍然是选中的。
因此，如果每页有10行，而我有14个没有过滤器的结果。我转到第2页查看结果11-14，检查过滤器，使我返回到第1页，总共有5个结果，然后我点击返回。我现在在过滤结果的第2页看到第11-5行，共5行……
历史记录有没有办法记住表单、复选框和其他输入？因此，如果我回击我所描述的情况，它将转到第2页，但随着表单筛选器的删除，它们与之前一样。
我在想，我必须对表单上的每个值都使用路由...但是希望有一种更好的方法来实现这一点(希望不用重写整个代码)。
任何帮助都是非常感谢的。
我有两个主要的输入视图:一个绑定到过滤器表单，一个用于分页选择。筛选器窗体视图调用结果的另一个视图(绑定到行的集合)。
下面是filter form视图：
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();
});
}
});回答 1
Stack Overflow用户
发布于 2013-05-01 02:46:59
我建议为您的FilterForm视图创建一个filterModel，并使用它来保存状态。下面是一个参考实现。
FilterModel:
var FilterModel = Backbone.Model.extend({
initialize: function(){
if( !this.get('filters'))
this.set({filters: new Array()});
},
applyFilter: function(key){
var filters = this.get("filters");
set("filters", _.union(filters, key));
return this;
},
removeFilter: function(key){
var filters = this.get("filters");
set("filters", _.without(filters, key));
return this;
},
defaults: {
fooFilters: [
{key: "size", label: "Filter By Size"},
{key: "color", label: "Past Week"}]
}
});在视图中绑定一个处理程序以更新过滤器模型：
filterClicked: function (e) {
var filter = $(e.target);
if(filter.is(':checked'))
this.model.applyFilter(filter.attr("id"));
else
this.model.removeFilter(filter.attr("id"));
},修改过滤器模板，以便在呈现时将模型状态应用于复选框：
<ul id="fooFilters" class="foo-filter-list">
<% _.each(fooFilters, function(f) { %>
<li>
<label for="<%=f.key%>"><%=f.name%></label>
<input type="checkbox" name="" value="" id="<%=f.key%>" <%if($.inArray(f.key, filters) === -1 {%>checked<%}%>/>
</li>
<% }); %>
</ul>https://stackoverflow.com/questions/16304651
复制相似问题
腾讯云开发者
