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

【问题标题】：Knockout binding for radio button not working initially单选按钮的敲除绑定最初不起作用
【发布时间】：2016-03-07 21:13:02
【问题描述】：

我目前有以下 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”。是否有任何潜在的原因导致单选按钮不被选中，即使它的值等于单选按钮的值之一？

【问题讨论】：

您能创建一个这样的工作示例吗？ I failed to reproduce it.
你想用这种方法完成什么？
@MikeC 我认为您需要使用 radioBool。更新小提琴：jsfiddle.net/hp8jter2/1
@MikeC: 怀孕：ko.observable.radioBool()

标签： javascript html knockout.js

【解决方案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" />

【讨论】：

我可能应该指定我稍后设置 self.pregnant(false)。请注意，我确实说过跨度的文本值返回了正确的字符串值。
恐怕你的问题不包含（足够的信息来创建）repro。尝试使用您在我的答案中看到的 Stack Snippet 功能（它位于编辑器的工具栏上）为您的问题添加可运行的重现。

【解决方案2】：

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

self.pregnant('false');

【讨论】：