Question

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

以下是一个示例:( 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是我所期望的，但单选按钮不会选择。奇怪的是，在我的实际代码中，行为是不一致的;有时无线电按钮可以工作，有时它们却没有，但就我所见，它一直不适用于小提琴。

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

Answer 1

您的checkedValue绑定变为如下函数：

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

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

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

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

或者通过绑定到一致的值。

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

编辑：

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

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/

Answer 2

似乎此问题已在较新版本的KO中得到解决。从版本3.2开始，我不再看到原始问题中提到的这种行为。

这是working JSFiddle，与原版相同，但KO更新为3.2。

使用带有单选按钮的checkedValue绑定

2 个答案: