24

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

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

4

4 回答 4

38

这是我们从这个论坛帖子中探索的一个选项:

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/

于 2012-05-10T13:32:43.757 回答
8

发生这种情况是因为 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);
于 2012-05-09T06:50:16.157 回答
4

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

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

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

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

于 2017-03-03T15:03:26.207 回答
3

我想我得到了答案,将数字“1”和“0”分别放入选项值:

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

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

于 2012-05-09T06:38:46.077 回答