5

我有两个单选按钮。

<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 中填充为真/假。基于这个真/假，我想设置我的单选按钮。

4

4 回答 4

14

选中的绑定对单选按钮的工作方式不同：

对于单选按钮，当且仅当参数值等于单选按钮节点的 value 属性时，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

在您的视图模型中：

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 指出的那样，您的绑定系统税在您的示例中被破坏了。

于 2013-05-28T05:30:20.377 回答
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>
于 2013-05-28T07:33:48.347 回答
1

它要简单得多。如果您想在附加到单选按钮的 observable 中存储与字符串不同的内容，只需将每个单选按钮的 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
}))
于 2019-05-02T06:23:55.370 回答
0

Afterdata-bind属性应该是等号而不是冒号。

<input type="radio" name="USGlobalUser" data-bind="checked:IsGlobal"/>
于 2013-05-28T05:06:19.053 回答