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

Posted 2023-05-07

【中文标题】Knockoutjs（2.1.0 版）：将布尔值绑定到选择框

【英文标题】：Knockoutjs (version 2.1.0): bind boolean value to select box

【发布时间】：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/

【参考方案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。