单选按钮检查绑定html5，durandal答案

【问题标题】：radio button checked binding html5, durandal单选按钮检查绑定html5，durandal
【发布时间】：2013-10-16 01:35:42
【问题描述】：

即使我在这个网站上看到很多类似的问题，但没有一个人回答我的问题。所以，请不要因为我再次讨论这个话题而生我的气。我在 durandal 项目中工作，我有 html 页面，后面有 javascript 文件。我在其中一个页面中有两个单选按钮。我希望他们的“checked”属性绑定到后面的视图模型中的一个变量。它看起来很简单……但事实并非如此！我尝试了两种方法，其中任何一种都没有成功：

first-way:在html中：

                             <input type="radio"
                                    name="radSearchBy"
                                    id="byNo"
                                    data-bind:"checked:isId" />

          in javascript:
                         isId: ko.observable(true)

第二种方式：在html中：

          in javascript:
                         isId: ko.observable("checked")

我知道问题出在哪里。即使我只是写

                           <input type="radio"
                                    name="radSearchBy"
                                    id="byNo"
                                    data-bind:"checked:true" />

或：

                     <input type="radio"
                                    name="radSearchBy"
                                    id="byNo"
                                    checked="checked" />

它不起作用。只有我写的人：

                     <input type="radio"
                                    name="radSearchBy"
                                    id="byNo"
                                    **checked** />

是的，“已检查”一词后面没有任何内容 - 效果很好。

但这是个问题，因为我该怎么做 *绑定？*

请尽快帮助我。

【问题讨论】：

那么....什么不起作用？
您阅读过checked 绑定的文档吗？ knockoutjs.com/documentation/checked-binding.html。因为它包含解决方案：For radio buttons, KO will set the element to be checked if and only if the parameter value equals the radio button node’s value attribute. So, your parameter value should be a string. In the previous example, the radio button with value="almond" was checked only when the view model’s spamFlavor property was equal to "almond".

标签： javascript html knockout.js durandal

【解决方案1】：

不幸的是，答案有点复杂。单选按钮将您的 observable 的值与单选按钮的 value 属性相匹配。在布尔情况下，不可能简单地处理，因为 HTML 将返回 'true' 或 'false' 作为字符串，而不是布尔值。

解决方案需要 AFAIK 计算的 observables：

HTML

<input type="radio"
    name="radSearchBy"
    value="true"
    data-bind="checked: value" />True
<input type="radio"
    name="radSearchBy"
    value="false"
    data-bind="checked: value" />False

JavaScript

radSearchBy = ko.observable(true);
value = ko.computed({
    read: function() { return radSearchBy.toString(); },
    write: function(val) { radSearchBy(val === 'true'); }
});

【讨论】：