Pej*_*man 1 javascript checkbox custom-binding knockout.js
简而言之:这是我用于将复选框置于不确定状态的淘汰赛自定义绑定。
ko.bindingHandlers.nullableChecked = {
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
if (value == null) element.indeterminate = true;
ko.bindingHandlers.checked.update(element, function () { return value; });
}
};
Run Code Online (Sandbox Code Playgroud)
如果初始值null
一切正常并且复选框处于不确定状态,但是当我单击复选框时,它似乎没有相应地将绑定属性的值更新为 false/true。我错过了什么吗?
@Fodagus 的答案适用于 Knockout <= 2.3.0,但在 Knockout >= 3.0.0ko.bindingHandlers.checked.update
中未定义。
我们发现这在 Knockout 3.1.0 中对我们有用:
ko.bindingHandlers.nullableChecked = {
init: function (element, valueAccessor) {
ko.bindingHandlers.checked.init(element, valueAccessor);
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
if (value == null) {
element.indeterminate = true;
}
else {
element.indeterminate = false;
}
}
};
Run Code Online (Sandbox Code Playgroud)
我们错过了什么吗?
如果有人在这里希望在未选中所有子项的情况下将全选类型复选框显示为中间,则可以使用这样的简单绑定
ko.bindingHandlers.indeterminateValue = {
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
element.indeterminate = value;
}
};
Run Code Online (Sandbox Code Playgroud)
那么你可以像这样使用它
<input type="checkbox" data-bind="checked: selectedAllProduce, indeterminateValue: selectedProduce().length > 0 && selectedProduce().length < produce.length" title="Select all/none"/>
Run Code Online (Sandbox Code Playgroud)
这是一个小提琴,显示它在计算 observable 选择所有示例 https://jsfiddle.net/deannorth/crqwac12/