Knockoutjs(版本2.1.0):绑定布尔值以选择框

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

以下是我们在此论坛帖子中探讨此选项的选项:

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);