Question

我想使用KO v2.1.0将boolean值绑定到select元素，但显然它不能按预期工作。

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：http://jsfiddle.net/greenlaw110/Ajm58/

Answer 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和视图模型之间注入可写的计算可观察对象。这只是在视图模型中直接执行此操作的替代方法。

此处示例：http://jsfiddle.net/rniemeyer/H4gpe/

Answer 2

这是因为select正在使用字符串，而不是任何阶段的布尔值。您应该尝试使用ko.computed（...）值。

点击此处查看详细信息：http://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);

Answer 3

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

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

请参阅http://jsfiddle.net/greenlaw110/Ajm58/2/

Answer 4

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

答案在于下面的冗长表达：

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

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

Knockoutjs（版本2.1.0）：绑定布尔值以选择框

4 个答案: