javascript - 使用单选按钮的 checkedValue 绑定(bind)

Question

我正在尝试使用 knockout 版本 3 中引入的 checkedValue 绑定(bind)和单选按钮，但没有得到我期望的行为。

这是一个示例:(viewModel 有两个属性；list 是一个数组；checkedVal 是一个可观察对象)

<div data-bind="foreach:list">
    <input type="radio" data-bind="
        checkedValue: {
            data: $data,
            index: $index(),
        },
        checked: $parent.checkedVal
    "/>
    <span data-bind="text: $data"></span>
</div>

JSFiddle

我希望单选按钮正常运行，并且 checkedVal 是一个包含数据和索引的对象。 checkedVal 如我所料，但单选按钮未选中。奇怪的是，在我的实际代码中，行为是不一致的；有时单选按钮有效，有时无效，但据我所知，它在 fiddle 中始终无效。

这是一个错误，还是我误解了它应该如何工作？

Answer 1

您的 checkedValue 绑定(bind)变成了一个函数，如下所示:

function () {
    return {
        data: $data,
        index: $index(),
    };
}

每次 checked 绑定(bind)更新时，它都会调用此函数来获取值。但是该函数总是返回一个新对象。即使对象包含相同的数据，Knockout 也不会将它们视为相同的。

您可以通过将值设为字符串来解决此问题。

    <input type="radio" data-bind="
        checkedValue: JSON.stringify({
            data: $data,
            index: $index(),
        }),
        checked: $parent.checkedVal
    "/>

或者通过绑定(bind)到一个一致的值。

    <input type="radio" data-bind="
        checkedValue: $data,
        checked: $parent.checkedVal
    "/>

编辑:

您可以使用遵循与 checked 相同模式的自定义绑定(bind)，但允许比较功能。

ko.bindingHandlers.radioChecked = {
    init: function (element, valueAccessor, allBindings) {
        ko.utils.registerEventHandler(element, "click", function() {
            if (element.checked) {
                var observable = valueAccessor(), 
                    checkedValue =  allBindings.get('checkedValue');
                observable(checkedValue);
            }
        });
    },
    update: function (element, valueAccessor, allBindings) {
        var modelValue = valueAccessor()(), 
            checkedValue =  allBindings.get('checkedValue'), 
            comparer = allBindings.get('checkedComparer');
        element.checked = comparer(modelValue, checkedValue);
    }
};

然后可以通过内容比较对象。

this.itemCompare = function(a, b) {
    return JSON.stringify(a) == JSON.stringify(b);
}

jsFiddle:http://jsfiddle.net/mbest/Q4LSQ/