如何使用带有 Knockout 的 Checked 绑定将布尔值绑定到单选按钮？

Question

给定以下 JSON 对象，使用 ko.mapping 进行映射：

{ AllowNotifications: ko.observable(true) }

我想将一个布尔值绑定到一个单选按钮，这样如果为真，则选中一个单选，如果为假，则选中另一个。

<input data-bind="checked: AllowNotifications" type="radio" name="allowNotifications" value="true"><label class="small positive" for="objectNotifications_true">Yes</label>
<input data-bind="checked: AllowNotifications" type="radio" name="allowNotifications" value="false"><label class="small negative" for="objectNotifications_false">No</label>

虽然没有抛出错误，但目前这并没有正确绑定。为什么这不起作用？

Answer 1

绑定不起作用的原因是收音机的值“true”或“false”是一个字符串，而 Knockout 正在尝试绑定到文字 bool 值。

一个合理的解决方法是指示 Knockout 将布尔值 true 和 false 转换为字符串表示形式。为此，我们必须在将 JSON 映射到可观察对象时提供一些说明：

例如：

var jsonData = { AllowNotifications: true };

var mapping = {
    'AllowNotifications': {
        create: function(options) { 
            return options.data ? 'true' : 'false';
        }
    }
};

viewModel = ko.mapping.fromJS(jsonData, mapping);

在上面的示例中，我们正在为 AllowNotifications 字段自定义 ko.mapping 的对象创建。

但是如果我们有几个 bool 属性来转换这将是多余和麻烦的，所以这里有一个更优雅的方法：

var jsonData = { AllowNotifications: true };

var boolToString = { create: function (options) { return options.data ? 'true' : 'false'; } };

var mapping = {
    'AllowNotifications': boolToString,
    'AnotherBoolProp': boolToString,
    'YetAnotherBoolProp': boolToString
};

var viewModel = ko.mapping.fromJS(jsonData, mapping);

详细信息可在 KO 文档中找到： http://knockoutjs.com/documentation/plugins-mapping.html