单选按钮选中绑定 HTML5，杜兰达尔

radio button checked binding html5, durandal

本文关键字：杜兰达 HTML5 绑定 单选按钮      更新时间：2023-09-26

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

第一种方式：在 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** />

是的，后面没有任何内容的"检查"字 - 效果很好。

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

请尽快帮助我。

不幸的是，答案有点复杂。单选按钮将可观察量的值与单选按钮的值属性匹配。在布尔情况下，不可能仅仅因为 HTML 将返回"true"或"false"作为字符串，而不是作为布尔值。

该解决方案需要 AFAIK 计算的可观察量：

.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'); }
});
相关文章：