Knockout + Radiobuttons - 在取消选中时将值切换回“false”

Posted 2023-05-08

【中文标题】Knockout + Radiobuttons - 在取消选中时将值切换回“false”

【英文标题】：Knockout + Radiobuttons - getting the value to toggle back to 'false' on uncheck

【发布时间】：2014-04-15 18:51:32

【问题描述】：

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

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

我的 JS 小提琴示例：http://jsfiddle.net/9mu8e/

我对设置中间值和 .subscribe() 对所有值进行排序有点谨慎。 （而分散的布尔值是我们发送到的 REST 接口的一个特性）。

更新：我添加了“添加新”按钮以将列表显示为动态的，并且可能包含重复值（因此跟踪文本属性或理论上的 DB 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);

【参考方案1】：

一个问题是 Knockout 的 checked 绑定根本无法按照您尝试使用它的方式工作。它的目的是使用绑定到组中所有单选按钮的单个 observable 进行设置，每个按钮都有一个唯一的值。

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

不过，使用自定义绑定可以实现您想要的。我在下面包含的那个使用 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();
            );
        
    ;
)();

小提琴：http://jsfiddle.net/mbest/3dy3s/

【参考方案2】：

视图模型：-

var item = function (name) 
  var self = this;
  self.name = ko.observable(name);

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

var viewModel = function () 
  var self = this;
  self.isMostTerrible = ko.observable(true);
  self.Checked = ko.observable();
  self.itemsList = itemList;
;
ko.applyBindings(viewModel);

查看

<div>Current item:
  <input type="radio" name="group" data-bind="checked: isMostTerrible" /> <span data-bind="text: isMostTerrible()==='on'"></span>
</div>
<ul data-bind="foreach: itemsList">
  <li> <span data-bind="text: name"></span>
     <input type="radio" name="group" data-bind="checked: isMostTerrible,value:name" /> <span data-bind="text: isMostTerrible()==name()"></span>
 </li>
</ul>

Fiddle Demo

【讨论】：

谢谢，非常接近。在我的特殊情况下，我没有可靠的标识符（您使用其他正确的 isMostTerrible()==name()）。我的列表可能包含新的动态值，其中可能包含重复项 - 并且新条目不会有数据库 ID。问题 + jsFiddle 已更新。