我想使用 KO v2.1.0 将布尔值绑定到选择元素，但显然它不能按预期工作。
HTML 代码：
<select data-bind="value: state">
<option value="true">On</option>
<option value="false">Off</option>
</select>
JavaScript 代码：
var model = {
state: ko.observable(false)
};
ko.applyBindings(model)
所以我希望选择框以初始值进入“关闭”位置，false但它处于“开启”状态。如果我输入 state:ko.observable("false")这将是正确的，但这不是我想要的。任何人都知道如何将布尔值绑定到带有 KO 的选择框？
这是我们从这个论坛帖子中探索的一个选项：
ko.bindingHandlers.booleanValue = {
init: function(element, valueAccessor, allBindingsAccessor) {
var observable = valueAccessor(),
interceptor = ko.computed({
read: function() {
return observable().toString();
},
write: function(newValue) {
observable(newValue === "true");
}
});
ko.applyBindingsToNode(element, { value: interceptor });
}
};
因此，我们使用自定义绑定在 UI 和我们的视图模型之间注入一个可写的计算 observable。这只是直接在您的视图模型中执行此操作的替代方法。
发生这种情况是因为 select 使用的是字符串，而不是任何阶段的布尔值。您应该尝试使用 ko.computed( ... ) 值。
在此处查看详细信息：https ://jsfiddle.net/Ajm58/3/
<select id="testSelect" data-bind="value: stateString">
<option value="true">true</option>
<option value="false">false</option>
</select>
var model = {
state: ko.observable(false)
};
model.stateString = ko.computed({
read: function() { return (this.state() ? "true" : "false"); },
write: function(value) { this.state(value == "true"); }
}, model);
ko.applyBindings(model);
setTimeout(function() {
model.state(true);
}, 1500);
setTimeout(function() {
$("#testSelect").val("false");
}, 3000);
比其他答案容易得多：使用options-Binding。
答案在下面那种冗长的表达式中：
<select data-bind="options: [{text: 'On', value: true}, {text: 'Off', value: false}], value: lala1, optionsValue: 'value', optionsText: 'text'">
通过使用选项绑定，您几乎可以将所有内容分配给选项的值。我猜，将显式值绑定到选项绑定是相当不常见的，但在这种 2-way 情况下，这是合理的。
我想我得到了答案，将数字“1”和“0”分别放入选项值：
<select data-bind="value: state">
<option value="1">On</option>
<option value="0">Off</option>
</select>