asp.net-mvc - 如何设置使用 knockout.js 检查的单选按钮？

Question

我有两个单选按钮。

<td>
    <div style="display: inline; margin-right: 10px">
         <input type="radio" name="USGlobalUser" data-bind:"checked:IsGlobal/>US
    </div>
    <div style="display: inline">
         <input type="radio" name="USGlobalUser" data-bind:"checked:IsGlobal"/>Global
    </div>
</td>

我正在像这样填充我的模型

QuestionnaireModel = function (data) {
  self.IsGlobal = ko.protectedObservable(data ? data.IsGlobal : false);
}

该值完全来自数据库，并且它在 self.IsGlobal 中填充为真/假。基于这个真/假，我想设置我的单选按钮。

Answer 1

checked binding单选按钮的工作方式不同:

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.

所以你的 IsGlobal应该包含一个字符串，并且您需要具有与单选按钮的值相同的字符串:

<input type="radio" name="USGlobalUser" 
       data-bind="checked: IsGlobalCheckbox" value="false" />US
<input type="radio" name="USGlobalUser" 
       data-bind="checked: IsGlobalCheckbox" value="true" />Global

在您的 View 模型中:

self.IsGlobal = ko.observable(data ? data.IsGlobal + "" : "false");

如果您想保留 IsGlobal要存储 bool 值，您需要为进行转换的单选按钮创建一个新的计算属性:

self.IsGlobalCheckbox = ko.computed({
    read: function() {
        return self.IsGlobal() + "";
    },
    write: function (v) {
        if (v == "true") self.IsGlobal(true)
        else self.IsGlobal(false)
    }
}); 

演示 JSFIddle.

顺便说一句，正如 Tomas 指出的那样，您的绑定(bind)系统税在您的样本中被破坏了。