Javascript Backbone.js表单值在历史中被记住

我是整个主干网的新手（实际上我还不是一个JavaScript程序员），我遇到了过滤器表单的问题

基本上，我有一个数据库，我的主干收集从中填充。在页面上，有一个筛选器部分，我可以在其中选中诸如“Jobstatus:Running、Completed、Failed等”或诸如“用户名：test0”之类的输入。在我开始对结果分页之前，所有这些都非常有效

我设置了一个路由器来处理#page/：page。这也是可行的，比如说我进入第2页时没有选中任何过滤器，然后在第2页上检查一些过滤器（现在使用导航（page/1）将结果设置回第1页），当我点击“后退”按钮时，我返回第2页（因为这是我最后一次打开“没有过滤器”结果的地方），但我的过滤器框仍然处于选中状态

因此，如果每页有10行，我有14个没有过滤器的结果。我转到第2页查看结果11-14，检查一个过滤器，该过滤器返回到第1页，总共有5个结果，然后我回击。我现在在过滤结果的第2页看到第11-5行，共5行

历史记录是否可以记住表单复选框和其他输入？因此，如果我回击我描述的情况，它会转到第2页，但是表单过滤器会像以前一样删除

我在想我必须为表单上的每个值使用路由。。。但是希望有更好的方法来实现这一点（希望不重写整个代码）

感谢您的帮助

我有两个主要的输入视图：一个绑定到过滤器表单，一个用于分页选择。filter表单视图为结果调用另一个视图（与行集合关联）

以下是筛选表单视图：

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

---

我建议为您的FilterPerform视图创建一个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>

在视图中绑定处理程序以更新过滤器模型：

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>

修改过滤器模板，以便在渲染时将模型状态应用于复选框：

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>