近日遇到一个问题。在做网站开发时一个页面使用了knockoutjs对一系列复选框进行赋值。然后在会员勾选一部分复选框后会跳到另一个页面。但是当会员按浏览器的回退按钮时,却出现了回退后的页面中所有复选框被选中的问题。出错代码如下:
1
2
3
4
5
6
|
<
div
class
=
"col-md-12 border"
data-bind
=
"foreach:smallSortVM"
style
=
"overflow-y:scroll;"
>
<
div
style
=
"margin-top: 15px;"
>
<
input
name
=
"chk"
type
=
"checkbox"
data-bind
=
"attr:{value:gid}"
/>
<
span
data-bind
=
"text:name"
></
span
>
</
div
>
</
div
>
|
刚开始以为是浏览器的缓存问题,清缓存,问题依旧,换浏览器,问题仍然依旧。最后把视线移到knockoutjs绑定上。把knockoutjs绑定去除掉。只是手写了几个html复选框,然后进行操作,跳到另一个页面,再回退,没这个问题了。看来是knockoutjs checkbox绑定的问题。因为觉得是这里的问题,我在传值的时候增加了一个checked绑定,统一赋初值false.修改后的代码如下:
1
2
3
4
5
6
|
<
div
class
=
"col-md-12 border"
data-bind
=
"foreach:smallSortVM"
style
=
"overflow-y:scroll;"
>
<
div
style
=
"margin-top: 15px;"
>
<
input
name
=
"chk"
type
=
"checkbox"
data-bind
=
"attr:{value:gid},checked:isCheck"
/>
<
span
data-bind
=
"text:name"
></
span
>
</
div
>
</
div
>
|
这跳到另一页面,然后按回退按钮,不会全选了。但是仍然有问题,因为它一个也不选了。而我们知道,当按回退按钮时,正常情况下,你当时选中什么,回退后还会保留这个选中的。读knockoutjs的说明文档,找不到解决办法。但是看到了这样一段对checkbox绑定的说明:
For checkboxes, KO will set the element to be checked when the parameter value is true
, andunchecked when it is false
. If you give a value that isn’t actually boolean, it will be interpreted loosely. This means that nonzero numbers and non-null
objects and non-empty strings will all be interpreted as true
, whereas zero, null
, undefined
, and empty strings will be interpreted asfalse
这段话的意思是对于复选框,KO会当参数值为true时设置为选中,否则设置为未选中。如果你给的值不是实际意义的bool值,KO会自行进行一个宽泛的解析。这意味着非零数,非null对象及非空字符串都会被解析为true,其他的情况会被解析为false.但是,实际我进行的测试显示,即使这个复选框我不赋值,在后退的时候它仍然会被选中。看来这是一个knockoutjs的bug。用knockoutjs是解决不了了。我想到了javascript的cookie。在提交前存被选中的项到cookie,然后后退的时候重新赋复选框的值。这样应该能够解决。思路有了,接着就是写代码。
在跳转到另一个页面前进行这样得处理:
//被选中项保存为cookie值$.cookie("checkeds",arr.join());
其中arr.join()是被选中项的字符串。
然后在此页面knockoutjs绑定成功后进行这样得处理:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
//根据保存的cookie,在history.back()后退时重新给checkbox赋值
var
checkeds=$.cookie(
"checkeds"
);
if
(!$.IsNullOrEmpty(checkeds)) {
var
arr=checkeds.split(
','
);
$(
"input[name='chk']:checkbox"
).each(
function
(index) {
var
self=$(
this
);
$.each(arr,
function
(index,item) {
if
(item==self.val()) {
self.prop(
"checked"
,
true
);
return
;
}
});
});
}
$.cookie(
"checkeds"
,
null
);
//根据保存的cookie,在history.back()后退时重新给checkbox赋值
|
这样就解决了。
在重新赋值后调用
$.cookie("checkeds",null);
清空cookie