1

简而言之：这是我的淘汰赛自定义绑定，用于将复选框置于不确定状态。

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

如果初始值null一切正常并且复选框处于不确定状态，但是当我单击复选框时，它似乎没有相应地将绑定属性的值更新为 false/true。我错过了什么吗？

4

5 回答 5

6

如果有人在这里希望将全选类型复选框显示为中间，如果不是所有子项都被选中，您可以使用这样的简单绑定

ko.bindingHandlers.indeterminateValue = {
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        element.indeterminate = value;
    }
};

那么你可以像这样使用它

 <input type="checkbox" data-bind="checked: selectedAllProduce, indeterminateValue: selectedProduce().length > 0 && selectedProduce().length < produce.length" title="Select all/none"/>

这是一个小提琴，显示它在计算的 observable 上工作选择所有示例 https://jsfiddle.net/deannorth/crqwac12/

于 2017-06-23T11:19:50.443 回答
5

@Fodagus 的答案适用于 Knockout <= 2.3.0，但在 Knockout >= 3.0.0 中，ko.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;
            }
        }
    };

我们错过了什么吗？

于 2014-07-09T16:02:35.677 回答
4

你没有打电话给 Init。

只需像在更新中所做的那样代理 init 函数以在您的 nullableChecked 初始化函数中进行检查。

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;
        ko.bindingHandlers.checked.update(element, valueAccessor);
    }
};

如果没有初始化，它实际上永远不会在复选框上设置“点击”绑定来告诉淘汰赛某些事情已经改变。如果您查看调试代码 ( http://knockoutjs.com/downloads/knockout-2.2.1.debug.js )，您会看到 init 使用 jQuery 在复选框上设置“单击”事件以进行更新值变化时的可观察值。

ko.bindingHandlers['checked'] = {
'init': function (element, valueAccessor, allBindingsAccessor) {
    var updateHandler = function() {
        var valueToWrite;
        if (element.type == "checkbox") {
            valueToWrite = element.checked;
        } else if ((element.type == "radio") && (element.checked)) {
            valueToWrite = element.value;
        } else {
            return; // "checked" binding only responds to checkboxes and selected radio buttons
        }

        var modelValue = valueAccessor(), unwrappedValue = ko.utils.unwrapObservable(modelValue);
        if ((element.type == "checkbox") && (unwrappedValue instanceof Array)) {
            // For checkboxes bound to an array, we add/remove the checkbox value to that array
            // This works for both observable and non-observable arrays
            var existingEntryIndex = ko.utils.arrayIndexOf(unwrappedValue, element.value);
            if (element.checked && (existingEntryIndex < 0))
                modelValue.push(element.value);
            else if ((!element.checked) && (existingEntryIndex >= 0))
                modelValue.splice(existingEntryIndex, 1);
        } else {
            ko.expressionRewriting.writeValueToProperty(modelValue, allBindingsAccessor, 'checked', valueToWrite, true);
        }
    };
    ko.utils.registerEventHandler(element, "click", updateHandler);

    // IE 6 won't allow radio buttons to be selected unless they have a name
    if ((element.type == "radio") && !element.name)
        ko.bindingHandlers['uniqueName']['init'](element, function() { return true });
},

编辑：这是一个小提琴：http: //jsfiddle.net/cclose/NFfVn/

于 2013-03-26T15:42:49.303 回答
2

在新版本knockout 3.0.0及以上。checkbox绑定处理程序中的更新方法被删除。click event因此，您应该在函数中创建一个以在单击init时触发更新方法checkbox。下面是一个将 a 转换为 a 的绑定处理程序jquery checkbox示例uniform checkbox。

ko.bindingHandlers.checkedUniform =
{
    init: function (element, valueAccessor) {
        ko.bindingHandlers.checked.init(element, valueAccessor);
        $(element).uniform().on('click', ko.bindingHandlers.checkedUniform.update);
    },
    update: function (element, valueAccessor) 
    {
        ko.bindingHandlers.checked.update(element, valueAccessor);
        $.uniform.update($(element));
    }
};
于 2014-08-13T09:17:57.297 回答
1

处理程序接收存储的值的checked访问器，而不是持有该值的可观察对象。因此，可观察对象永远不会获得由处理程序引起的任何值更改。我认为您应该能够按原样传入值访问器。

ko.bindingHandlers.nullableChecked = {
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value == null) element.indeterminate = true;
        ko.bindingHandlers.checked.update(element, valueAccessor);
    }
};
于 2013-03-26T15:32:37.573 回答