我有一个 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);
最佳答案
一个问题是 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/
关于knockout.js - Knockout + Radiobuttons - 取消选中时获取切换回 'false' 的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22337938/