Question

我目前有以下HTML ...

<input type="radio" style="height: 12px; width: 20px;" name="physTabPregRadio" value="true" data-bind="checked: pregnant.radioBool" />Y
<input type="radio" style="height: 12px; width: 20px;" name="physTabPregRadio" value="false" data-bind="checked: pregnant.radioBool" />N
<span data-bind="text: pregnant.radioBool" />

...而radioBool函数是ko的扩展，如此处所定义的......

ko.observable.radioBool = function () {
    var observable = ko.observable();
    observable.radioBool = ko.computed({
        read: function () {
            if (observable() === true) return 'true';
            else if (observable() === false) return 'false';
            else return 'unknown';
        },
        write: function (v) {
            if (v.toLowerCase() === 'true') observable(true);
            else if (v.toLowerCase() === 'false') observable(false);
            else observable(undefined);
        }
    });
    return observable;
};

...并在模型中初始化，就像这样...

self.pregnant = ko.observable.radioBool();
self.pregnant(false);

加载页面后，既没有选中单选按钮，也没有选中span的文本为“false”。是否有任何可能的原因导致无法检查单选按钮，即使其值等于单选按钮的值之一？

Answer 1

您需要初始化var observable = ko.observable(false);（明确地使用false），否则它首先会有undefined作为其值，因此read函数将会失效到最后else。

见这个例子：

var self = {};

ko.observable.radioBool = function () {
    var observable = ko.observable(false);
    observable.radioBool = ko.computed({
        read: function () {
            if (observable() === true) return 'true';
            else if (observable() === false) return 'false';
            else return 'unknown';
        },
        write: function (v) {
            if (v.toLowerCase() === 'true') observable(true);
            else if (v.toLowerCase() === 'false') observable(false);
            else observable(undefined);
        }
    });
    return observable;
};

self.pregnant = ko.observable.radioBool();

ko.applyBindings(self);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<input type="radio" name="physTabPregRadio" value="true" data-bind="checked: pregnant.radioBool" />Y
<input type="radio" name="physTabPregRadio" value="false" data-bind="checked: pregnant.radioBool" />N
<span data-bind="text: pregnant.radioBool" />

Answer 2

我遇到了类似的问题。通过使用字符串值而不是布尔值或数字初始化observable来解决此问题。

self.pregnant('false');

单选按钮的敲除绑定最初不起作用

2 个答案: