select - Knockoutjs(版本 2.1.0) : bind boolean value to select box

Question

我想使用 KO v2.1.0 将 boolean 值绑定(bind)到选择元素，但显然它不能按预期工作。
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")这将是正确的，但这不是我想要的。任何人都知道如何将 boolean 值绑定(bind)到带有 KO 的选择框？
jsfiddle: https://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 });
    }
};

因此，我们使用自定义绑定(bind)在 UI 和我们的 View 模型之间注入(inject)一个可写的计算 observable。这只是直接在您的 View 模型中执行此操作的替代方法。
示例: https://jsfiddle.net/rniemeyer/H4gpe/