从单选按钮收集输入，链接到（可观察的）布尔值，并且是必填字段（使用 ko-validation）

Question

我想要一种方法来获得一个简单的 y/n 单选按钮输入，为我提供一个可以使用的布尔值。我让它像这样工作，使用可写的可观察对象和已检查的绑定：

js:

var viewModel = {    
...
    salary_ind_yn: ko.pureComputed({

        read: function () {            
        },
        write: function (value) {
            if (value == "yes") {
                viewModel.salary_ind(true);
            } else if (value =="no") {
                viewModel.salary_ind(false);
            }
        }
    }),
    salary_ind: ko.observable(),
...
}

html:

<div class="form-field">
<label>Use salary indicator?</label>
<span for="salary_ind_yes"><input type="radio" name="salary_ind" value="yes" data-bind="checked:salary_ind_yn" />&nbsp;Yes</span>&nbsp;&nbsp;
<span for="salary_ind_no"><input type="radio" name="salary_ind" value="no" data-bind="checked:salary_ind_yn">&nbsp;No</span>
</div>

但是使用这种语法我无法弄清楚如何让验证工作...... 对于其他领域已经让它与 .extend 一起工作有点像这样：

email_input: ko.observable().extend({
        required: true,
        email:true,
}),

所以我想如果我设置它，那么默认情况下会选中 'no' 按钮，这意味着我不需要检查用户是否单击了一个或另一个，但无法确定了解如何使用 pureComputed / read / write 语法来做到这一点。

非常感谢任何帮助！干杯！

Answer 1

您应该能够通过 checkedValue 数据绑定使用常规可观察对象：

var vm = {
  yn: ko.observable(true)
};

vm.yn.subscribe(console.log.bind(console, "New checked value:"));

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<label><input type="radio" name="yn" data-bind="checked: yn, checkedValue: true">yes</label>
<label><input type="radio" name="yn" data-bind="checked: yn, checkedValue: false">no</label>

从单选按钮收集输入，链接到（可观察的）布尔值，并且是必填字段（使用 ko-validation）

Collect input from radio button, linked to a (observable) boolean, and is required field (using ko-validation)

html

knockout.js

knockout-validation