Knockoutjs（2.1.0 版）：将布尔值绑定到选择框答案

【问题标题】：Knockoutjs (version 2.1.0): bind boolean value to select boxKnockoutjs（2.1.0 版）：将布尔值绑定到选择框
【发布时间】：2012-05-17 15:34:51
【问题描述】：

我想使用 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，但它处于“开启”状态。如果我输入状态：ko.observable("false") 它将是正确的，但这不是我想要的。有人知道如何将布尔值绑定到带有 KO 的选择框吗？

Jsfiddle：https://jsfiddle.net/greenlaw110/Ajm58/

【问题讨论】：

标签： select knockout.js boolean knockout-2.0

【解决方案1】：

这是我们从这个论坛post 探索的一个选项：

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。这只是直接在您的视图模型中执行此操作的替代方法。

示例：https://jsfiddle.net/rniemeyer/H4gpe/

【讨论】：

这对我来说是完美的解决方案！它改变了机制，而不是数据
这似乎是完美的解决方案。我唯一的问题是，这种方法有什么“隐藏的危险”吗？如果您有大量的 booleanValue 绑定，它是否可以很好地扩展？简而言之，您有什么理由不想要使用这种方法？
我不觉得使用这种技术有任何隐藏的问题。它确实在实际模型值和绑定之间添加了一个额外的可写计算 observable，但这相当小，而且无论如何你都必须在视图模型方面做一些事情。
您会想提一下，小提琴需要 KO 2.3 才能显示 <pre> 数据。它是用 KO 3.0 保存的。

【解决方案2】：

发生这种情况是因为 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);

【讨论】：

【解决方案3】：

比其他答案容易得多：使用options-Binding。

答案在下面那种冗长的表达式中：

<select data-bind="options: [{text: 'On', value: true}, {text: 'Off', value: false}], value: lala1, optionsValue: 'value', optionsText: 'text'">

通过使用选项绑定，您几乎可以将所有内容分配给选项的值。我想，将显式值绑定到选项绑定是相当不常见的，但在这种 2-way 情况下，这是合理的。

【讨论】：

【解决方案4】：

我想我得到了答案，将数字“1”和“0”分别放在选项值中：

<select data-bind="value: state">
    <option value="1">On</option>
    <option value="0">Off</option>
</select>

见https://jsfiddle.net/greenlaw110/Ajm58/2/

【讨论】：

不绑定为布尔值，请参阅this fiddle。 state 实际上在这里等于 '0' 或 '1'，而不是 true 或 false。