knockout.js - Knockout + Radiobuttons - 取消选中时获取切换回 'false' 的值

Question

我有一个 Knockout 应用程序，其中有多个 bool 属性，只有 1 个可以为 true。 (而不是 1 个基础属性，每个单选按钮都是一个不同的值)。

当我选择一个单选按钮时，observable 将正确更新为单选按钮的 checkedValue。当我取消选择它时，该值仍然存在。有什么方法可以将可观察对象设置为 false？

我的 JS fiddle 示例:http://jsfiddle.net/9mu8e/

我有点担心设置一个中间值，.subscribe() 来整理所有值。 (分散的 bool 值是我们发送到的 REST 接口(interface)的一个特性)。

更新:我添加了“添加新”按钮以将列表显示为动态列表，并且可能包含重复值(因此跟踪文本属性或理论上的数据库 ID 不是不可能)。 jsFiddle 链接已更新。

我的例子:

查看:

<div>Current item: 
    <input type="radio" name="group" data-bind="checked: isMostTerrible, checkedValue: true" />
    <span data-bind="text: isMostTerrible"></span>
</div>

<ul data-bind="foreach: itemsList">
    <li>
        <span data-bind="text: name"></span>
        <input type="radio" name="group" data-bind="checked: isMostTerrible, checkedValue: true" />
        <span data-bind="text: isMostTerrible"></span>
    </li>
</ul>

<button data-bind="click: onAddNewItem">Add new</button>

查看模型:

var item = function(name, dbId) {


var self = this;

    self.dbId = ko.observable(dbId);
    self.name = ko.observable(name);
    self.isMostTerrible = ko.observable(false);
}

var itemList = [
    new item("Taxes", 1),
    new item("Death", 2)
]

var viewModel = function() {
  var self = this;

    self.isMostTerrible = ko.observable(true);
    self.itemsList = ko.observableArray(itemList);

    self.onAddNewItem = function() {
        // Note - Adding a new item doesn't add a DB ID.
        // (Theoretically occurs on save)
        self.itemsList.push(new item("New item"));
    }
};

ko.applyBindings(viewModel);

Answer 1

一个问题是 Knockout 的 checked 绑定(bind)根本无法按照您尝试使用它的方式工作。它旨在设置一个绑定(bind)到组中所有单选按钮的单个可观察对象，每个按钮都有一个唯一的值。

另一个问题是，当单选按钮被取消选择时，浏览器不提供通知。 (参见 OnChange event handler for radio button (INPUT type="radio") doesn't work as one value)。因此，监听 change 事件的简单绑定(bind)将不起作用。

不过，使用自定义绑定(bind)可以实现您想要的效果。我在下面包含的那个使用 observable 来跟踪当前选择的单选按钮，以便它可以相应地更新模型值。

ko.bindingHandlers.radioChecked = (function() {
    var groupObservables = {};
    return {
        init: function(element, valueAccessor) {
            var name = element.name,
                groupObservable = groupObservables[name] || (groupObservables[name] = ko.observable());

            ko.utils.registerEventHandler(element, 'click', function() {
                valueAccessor()(element.checked);
            });
            var s1 = ko.computed(function() {
                if (valueAccessor()()) {
                    element.checked = true;
                    groupObservable(element);
                }
            });
            var s2 = groupObservable.subscribe(function() {
                valueAccessor()(element.checked);
            });
            ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
                s1.dispose();
                s2.dispose();
            });
        }
    };
})();

fiddle :http://jsfiddle.net/mbest/3dy3s/