首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >历史记录中的Backbone.js表单值

历史记录中的Backbone.js表单值
EN

Stack Overflow用户
提问于 2013-05-01 00:24:37
回答 1查看 284关注 0票数 0

我对整个主干都是新手(实际上我还不是一个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视图:

代码语言:javascript
运行
复制
 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();
                });
            }
        });
EN

回答 1

Stack Overflow用户

发布于 2013-05-01 02:46:59

我建议为您的FilterForm视图创建一个filterModel,并使用它来保存状态。下面是一个参考实现。

FilterModel:

代码语言:javascript
运行
复制
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"}]
  }
});

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

代码语言:javascript
运行
复制
 filterClicked: function (e) {
   var filter = $(e.target);
   if(filter.is(':checked'))
     this.model.applyFilter(filter.attr("id"));
   else
     this.model.removeFilter(filter.attr("id"));
 },

修改过滤器模板,以便在呈现时将模型状态应用于复选框:

代码语言:javascript
运行
复制
<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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16304651

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档