js在历史上记录的表单值
Backbone.js Form Values Remembered in History
我是整个Backbone的新手(实际上我还不是一个JavaScript程序员),我遇到了过滤器表单的问题。
基本上我有一个数据库,我的主干集合从中填充。在页面上,有一个过滤器部分,我可以在其中勾选诸如"Jobstatus: Running, Completed, Failed等"之类的内容。或者输入"用户名:test0"。这一切都很好,直到我开始分页我的结果。
我设置了一个路由器来处理#page/:page。这也是可行的,假设我去到第2页,没有筛选,然后在第2页,我检查了一些过滤器(现在通过使用导航(页/1)将我的结果设置回第1页),当我点击后退按钮,我回到第2页(因为这是我的无筛选结果最后一次在),但我的过滤器框仍然被选中。
所以如果每页有10行,我有14个没有过滤器的结果。我转到第2页查看结果11-14,检查一个过滤器,返回到第1页,总共有5个结果,然后我返回。我现在在过滤结果的第2页,看到5的第11-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();
});
}
});
我建议为您的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>
- 将HTML表单发布到iframe会导致浏览器历史记录出现问题
- 使用记录保存的消息进行表单验证
- 避免在表单上“撤消”历史记录条目以进行后退按钮
- 将动态表单元素限制为最多10个记录
- CRM 2013-引用子记录的Javascript表单警报(onload事件)
- 是为大约100条记录中的每一条呈现一个表单更快,还是用ajax加载单个表单更快
- CRM 2015 Javascript,防止记录表单保存并关闭
- 想要获取表单记录
- 如何记录链接点击,使表单提交
- 如何使用 jquery 在同一页面上从数据库记录填充表单
- 基于表单输入值,如何 2 生成选择 4 下拉菜单 w 数据库中的行/记录数据,该数据库将在选择时预填充表单
- 如何为下拉菜单生成选择,其中包含数据库中的行/记录数据,该数据库将在选择时预填充表单
- 为什么尽管查询查找记录,mysql 数据没有拉入表单,查找值是否需要是唯一的
- 将值添加到文本框历史记录中,而无需使用 JavaScript 或 Jquery 提交表单
- 如何生成下拉菜单选择以根据数据库中可用的行/记录表单数据填充表单
- 如何保存具有多个选择下拉列表的 html 表单的选择历史记录
- 如何为数据库中的不同记录/行创建用户生成的链接列表,这些记录/行在单击时填充 html 表单
- extjs 4 表单加载记录实际上不会加载它
- 使用1个HTML表单:要求用户提供唯一标识符,从数据库中获取记录,解析为JSON,使用jquery填充插件填充HTML页
- ExtJS 5:与视图模型/表单记录的持久更改混淆