Question

我正在使用MVC强类型视图来生成两个单选按钮

<div>
       @Html.LabelFor(model => model.Eligible)
        @Html.RadioButtonFor(model => model.Eligible,"true", new { id="yes", data_bind =       "checked: completeVM.Eligible " })
        @Html.Label("yes", "YES")
        @Html.RadioButtonFor(model => model.Eligible, "false", new {id="no", data_bind = "checked: completeVM.Eligible " })
        @Html.Label("no", "No")
</div>

如果我没有使用data_bind，那么当页面加载时，“No＆＃39;单选按钮将默认设置。但是在我添加data_bind之后，都没有选中单选按钮。我注意到在我的视图模型中，符合条件显示为：＆＃34;符合条件＆＃34;：false;如果我检查“不”＃39;按钮，它将显示为＆＃34;符合条件＆＃34;：＆＃34; false＆＃34;。我该如何解决这个问题，以便在页面加载时，“不”＃39;默认情况下将选中按钮。感谢

Answer 1

这是一个常见问题。单选按钮值始终为字符串。但是你想要布尔行为。最简单的解决方法是使用额外的计算observable为您进行翻译：

假设'this'指向您的viewmodel：

this.EligibleRadioHelper = ko.computed({
    read: function () {
        return this.Eligible().toString();
    },
    write: function (value) {
        this.Eligible(value === 'true');
    },
    owner: this
});

绑定这个新助手：

data-bind="checked: completeVM.EligibleRadioHelper"

当你想要布尔值（用于逻辑或用于持久化）时，使用原始的可观察值。

Answer 2

您也可以尝试使用knockout 3中提供的checkedValue绑定，而无需为视图模型编写计算函数。你的代码会变成这样：

<div>
   @Html.LabelFor(model => model.Eligible)
    @Html.RadioButtonFor(model => model.Eligible,"true", new { id="yes", data_bind =       "checked: completeVM.Eligible, checkedValue: true" })
    @Html.Label("yes", "YES")
    @Html.RadioButtonFor(model => model.Eligible, "false", new {id="no", data_bind = "checked: completeVM.Eligible, checkedValue: false " })
    @Html.Label("no", "No")

在淘汰数据绑定后没有设置MVC单选按钮默认值

2 个答案: