Knockoutjs (version 2.1.0): bind boolean value to select box

Question

I want to bind boolean value to select element using KO v2.1.0, but obviously it doesn't work as expected.

HTML code:

<select data-bind="value: state">
    <option value="true">On</option>
    <option value="false">Off</option>
</select>

JavaScript code:

var model = {
    state: ko.observable(false)
};

ko.applyBindings(model)

So I expect the select box goes to "Off" position with the initial value false but it was at "On". If I put state: ko.observable("false") it will be correct but that's not I wanted. Anyone know how to bind the boolean value to select box with KO?

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

Answer 1

Here is an option that we explored for this one from this forum 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 });
    }
};

So, we use a custom binding to inject a writeable computed observable between the UI and our view model. This is just an alternative to doing it directly in your view model.

Sample here: https://jsfiddle.net/rniemeyer/H4gpe/

Answer 2

This happens because the select is working with strings, and not booleans at any stage. You should try a ko.computed( ... ) value instead.

Check here for details: 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);

Answer 3

Much easier than the other answers: use the options-Binding.

The answer is in the kind of lengthy expression below:

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

By using the options binding, you're able to assign virtually everything to the value of an option. It's rather uncommon, I guess, to bind an explicit value to the options binding, but in this 2-way case, it is reasonable.

Answer 4

I think I got the answer, put the number "1" and "0" to the option value respectively:

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

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