Knockoutjs (версия 2.1.0): привязать логическое значение для выбора поля

Я хочу привязать логическое значение для выбора элемента с помощью 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, но оно было в "On". Если я поставлю состояние: ko.observable("false"), это будет правильно, но я этого не хочу. Кто-нибудь знает, как связать логическое значение, чтобы выбрать поле с KO?

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

Ответ 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 });
    }
};

Таким образом, мы используем настраиваемую привязку для инъекции, которую можно вычислить, наблюдаемого между пользовательским интерфейсом и нашей моделью просмотра. Это просто альтернатива его прямому использованию в вашей модели просмотра.

Пример здесь: http://jsfiddle.net/rniemeyer/H4gpe/

Ответ 2

Это происходит из-за того, что select работает со строками, а не на booleans на любом этапе. Вместо этого вы должны попробовать значение 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);

Ответ 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/

Ответ 4

Намного легче, чем другие ответы: используйте options -Binding.

Ответ в виде длинного выражения ниже:

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

Используя привязку опций, вы можете назначить практически все значение параметра. Это довольно необычно, я полагаю, для привязки явного значения к привязке опций, но в этом двухстороннем случае это разумно.