knockout.js - KnockoutJS 单选按钮不像复选框那样改变

Question

复选框和单选按钮的数据结构相同。选中复选框时，它们会返回正确的 bool 值(“选择的”变量)。

但是，当我选中单选按钮时，“已选择”总是更改为“值”(整数)。

即使'chosen' == true，单选按钮也不会在开始时被“选中”

Javascript:

function attributeValueViewModel(data) {
    var self = this;
    self.id = ko.observable(data.id);
    self.attributeID = ko.observable(data.attributeID);
    self.value = ko.observable(data.value);
    self.chosen = ko.observable(data.chosen);
}

function viewModel() {
    var self = this;
    self.attributeValues1 = ko.observableArray([]);
    self.attributeValues2 = ko.observableArray([]);
    self.addToList = function(data) {
        ko.utils.arrayForEach(data, function(item) {           
            self.attributeValues1.push(new attributeValueViewModel(item));
            self.attributeValues2.push(new attributeValueViewModel(item));
        });
    };
}

var arr = [
    {
        "id": 55,
        "attributeID": 28,
        "value": "Yes",
        "chosen": false,
    },
    {
        "id": 56,
        "attributeID": 28,
        "value": "No",
        "chosen": true,
    },
    {
        "id": 62,
        "attributeID": 28,
        "value": "Maybe",
        "chosen": false,
    }
];

var vm = new viewModel();
ko.applyBindings(vm);
vm.addToList(arr);

HTML

<b>Checkbox:</b>
<div id="test1">
    <span data-bind="foreach: attributeValues1()">
    <input type="checkbox" data-bind="value: id(), checked: chosen, attr: { name: 'test1' }" />
    <span data-bind="text: value()"></span>
    <span data-bind="text: chosen()"></span>
    </span>
</div>
<br />
<b>Radio:</b>
<div id="test2">
    <span data-bind="foreach: attributeValues2()">
    <input type="radio" data-bind="value: id(), checked: chosen, attr: { name: 'test2' }" />
    <span data-bind="text: value()"></span>
    <span data-bind="text: chosen()"></span>
    </span>
</div>​

这是我的 fiddle : http://jsfiddle.net/SN7Vn/1/

您能否解释一下这种行为以及为什么单选按钮不更新 bool 值(就像复选框那样)？

Answer 1

复选框和单选按钮的行为各不相同。当单个 observable 绑定(bind)到 checked 绑定(bind)(而不是数组)时，它们的行为特别不同。

对于复选框，它始终是一个 bool 值，表示它是否被选中。简单的。如果是数组，值 将从数组中添加/删除。

但是对于单选按钮，它将是分配给单选按钮的值。对于单个 observable，它只会被认为检查了它所绑定(bind)的值是否等于该值。在您的情况下，您的值绑定(bind)到 id 因此只有当 chosen 值等于相应的 id 时才会响应。对于数组，它会将值添加/删除到数组。

因为没有其他东西改变相应属性的 chosen 的值，所以它保持不变

我调整了您的示例以演示该值如何影响选中状态。 Updated fiddle

都拼出来了in the documentation , 仔细看看。

---

如果您希望它的工作方式类似于复选框的工作方式，则需要做一些工作才能使其正确。由于绑定(bind)的工作方式以及它们的顺序依赖性如何导致问题，我有这段代码感觉有点脆弱。您可以试试这个，我只是不确定它有多稳健。

为此，您需要一个可观察对象来跟踪实际选择的单选按钮的实际变化。然后您可以订阅该 observable 的更改以更新您选择的 observable。

ko.bindingHandlers.radiochecked = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        // the checked binding depends on the element having an initial value
        // we need to allow bindings that potentially set it to be applied first
        setTimeout(function () {
            var options = ko.utils.unwrapObservable(valueAccessor());
            if (options.checked()) {
                options.selected(element.value);
            }
            options.selected.subscribe(function (newValue) {
                options.checked(newValue === element.value);
            });
            ko.applyBindingsToNode(element, { checked: options.selected });
        }, 0);
    }
};

然后将其绑定(bind)到您的单选按钮:

<input type="radio" data-bind="
    value: id,
    radiochecked: { 
        'checked': chosen,
        'selected': $root.attributeValues2.selected
    },
    attr: { name: 'test2' }" />

Demo