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);
}

该值完全来自DB，它在self.IsGlobal中填充为true / false。根据这个真/假，我想设置我的单选按钮。

Answer 1

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

对于单选按钮，当且仅当参数值等于单选按钮节点的值属性时，KO才会将元素设置为。因此，您的参数值应为字符串。

因此，您的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

在你的viewmodel中：

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

如果你想保持IsGlobal存储一个布尔值，你需要为进行转换的单选按钮创建一个新的计算属性：

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

演示JSFIddle.

顺便提一下，Tomas注意到您的样本中的绑定系统被破坏了。

Answer 2

DB的值是布尔值True / False

我在viewmodel中更改了：

self.IsGlobal = ko.protectedObservable(data ? data.IsGlobal.toString() : "");

并在cshtml中：

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

Answer 3

它简单得多。如果要将与字符串不同的内容存储在可观察到的单选按钮中，只需将每个单选按钮的checkedValue绑定设置为与html元素相同的值。

<div style="display: inline; margin-right: 10px">
    <input type="radio" name="USGlobalUser" data-bind="checked: IsGlobal, checkedValue: false" value="false" />US</div>
<div style="display: inline">
    <input type="radio" name="USGlobalUser" data-bind="checked: IsGlobal, checkedValue: true" value="true" />Global</div>
var QuestionnaireModel = function (data) {
    var self = this;
    self.IsGlobal = ko.observable(data ? data.IsGlobal : false);
}

ko.applyBindings(new QuestionnaireModel({
    IsGlobal: true
}))

Answer 4

data-bind属性之后应该是等号而不是冒号。

<input type="radio" name="USGlobalUser" data-bind="checked:IsGlobal"/>

如何使用knockout.js设置单选按钮？

4 个答案: