单选按钮的 knockout.js 布尔数据绑定问题

Posted 2023-02-22

【中文标题】单选按钮的 knockout.js 布尔数据绑定问题

【英文标题】：knockout.js boolean data-binding issues with radio buttons

【发布时间】：2012-06-13 22:09:47

【问题描述】：

我目前正在执行以下操作以补偿布尔值不能很好地映射到单选按钮。由于字段是如何从 observables 中读取的，我被困在将 1 和 0 绑定到值（而不是 true 和 false）。 Pref1/Pref2 的值来自服务器的真/假布尔值。这里的关键是我不仅要对单选按钮的选中值进行数据绑定以匹配对象中的真/假，而且我还希望将真/假的布尔值写回 GraduationClass 对象。我的补偿代码不仅丑陋，而且不可扩展。

<input type="radio" value="1" name="radioGroup" data-bind="checked: Pref1" />Yes
<input type="radio" value="0" name="radioGroup" data-bind="checked: Pref2" />No    
<a href="javascript:void(0);" data-bind="click: $root.saveGraduationClass ">Save</a>  

function SiteSettingsViewModel() 
    var self = this;
    this.saveGraduationClass = function(graduationClass) 
        // hack until i get a custom radio button binding
        if (graduationClass.Pref1() == 1) 
            graduationClass.Pref1(true);            
         else 
            graduationClass.Pref1(false);            
          

        if (graduationClass.Pref2() == 1) 
            graduationClass.Pref2(true);
         else 
            graduationClass.Pref2(false);
        

        // ...ajax call to save graduationClass to the server
    

function GraduationClass(data) 
    var self = this;
    ko.mapping.fromJS(data, , this);

【问题讨论】：

如果是“是/否”问题，将表单更改为使用复选框而不是单选按钮不是更容易吗？

我想我可以，但理论上，我只是想看看如何解决这个问题。

@AdamLevitt - 您可以编写一个扩展程序来始终将 Pref1/2 的值转换为布尔值。但是我同意 Niko 的观点，但这没有意义，并且与单选按钮的工作方式相矛盾。

通常我同意复选框的建议，但是 a) 有时您别无选择，因为您无法控制 UX 设计；或 b) 有时故事还有更多内容。这是我最近处理的一个示例，其中需要单选按钮并且它们很有意义：(O) Use the calculated estimate: 123.50 ( ) Provide an override: [__________]。绑定到单选按钮的值是一个名为“UseOverride”的布尔属性。

【参考方案1】：

这是来自 knockoutJs 网站的示例，它演示了如何使用单选按钮 “检查”属性：

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
    Preferred flavor of spam:
    <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
    <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
    <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>
</div>

<script type="text/javascript">
    var viewModel = 
        wantsSpam: ko.observable(true),
        spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button
    ;

    // ... then later ...
    viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked
</script>

但我不明白你为什么使用两个对象 - 一个单选按钮组“radioGroup”的“Pref1”和“Pref2”？在这种情况下，您可以只使用一个对象，例如使用“spamFlavor”的示例。

所以，请更详细地描述您要绑定的内容：一个单选按钮按一个选定值分组，或其他内容。

您也可以使用计算的 observables 来计算不同的值，请参阅example。

【讨论】：

在标题中看到它如何提到绑定到 boolean？从我的角度来看，这根本不能回答所提出的问题。

@CarrieKendall，我认为作者将其标记为已回答，因为他的问题得到了答案，我错了吗？