在我的视图模型中，我有大量的复选框绑定到纯字符串：
<input type="checkbox" value="CODE" data-bind="checked: itemValue" />
到目前为止，我正在使用一个可观察数组将复选框的真/假值解析为我需要的值：
var viewModel = {
itemValue: ko.observableArray()
};
如果有的话，将复选框绑定到字符串值而不需要将其引用为itemValue[0]，哪种方法是最简单和最短的方法？
如果选中，我需要的是字符串值，如果未选中，则为 null。
由于我的视图模型中有大量的 observables，我会避免使用大量的条件，例如 if(itemValue) ...
使用 observableArray 摆弄：https://jsfiddle.net/wu470qup/
【问题讨论】：
标签： javascript checkbox knockout.js
如果您想要轻松标记，则必须跟踪要在视图模型中呈现的复选框。这是最简单的例子：
allValues 是一个常规的字符串数组。这些字符串中的每一个都会有一个复选框。 itemValues 是具有选中复选框的字符串的可观察数组。 correctedValues 是一个计算数组，null 代表每个未选中的框，每个选中的框都有一个字符串。
请注意，我使用$data 来引用foreach 中的当前字符串值。
var allValues = ["CODE", "ANOTHER_VAL"];
var itemValues = ko.observableArray();
var correctedValues = ko.computed(function() {
var all = allValues;
var checked = itemValues();
return all.map(function(val) {
return checked.indexOf(val) === -1 ? null : val;
});
});
var viewModel = {
allValues: allValues,
itemValues: itemValues,
correctedValues: correctedValues
};
ko.applyBindings(viewModel);<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<!-- ko foreach: allValues -->
<label>
<input type="checkbox" data-bind="checked: $parent.itemValues, checkedValue: $data" />
<span data-bind="text: $data"><span/>
</label>
<!-- /ko -->
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>更优雅的方法是为每个复选框创建视图模型。例如：
var CheckboxItem = function() {
this.label = ko.observable("CODE");
this.checked = ko.observable(false);
this.id = ko.computed(function() {
return this.checked() ? this.label() : null;
}, this);
};
使用 HTML 模板：
<label>
<input type="checkbox" data-bind="checked: checked" />
<input data-bind="value: label" />
</label>
然后，在父视图模型中，您可以存储 CheckBoxItems 的可观察数组，并拥有一个包含所有 id 属性的计算数组。
【讨论】：