Привязать knockout.js к булевому переключателю JQuery Mobile

Question

У меня есть логическое значение, привязанное к тумблеру JQM, но я не могу видеть, как оно реагирует на изменения базовой наблюдаемой.

Это моя истинная / ложная наблюдаемая:

ko.booleanObservable = function (initialValue) {
    var _actual = ko.observable(initialValue);
    var result = ko.computed({
        read: function () {
            var readValue = _actual().toString();
            return readValue;
        },
        write: function (newValue) {
            var parsedValue = (newValue === "true");
            _actual(parsedValue);
        }
    });
    return result;
};

Каков наилучший способ сочетания тумблера JQM и Knockout?

jsFiddle здесь: http://jsfiddle.net/nmq7z/

Спасибо всем заранее

ОБНОВЛЕНО: с лучшим тестовым набором: http://jsfiddle.net/FU7Nq/

Answer 1

Я понял,

Спасибо Кадумелю, который указал, что мой первый кусок кода был действительно плохим. Затем я переключился с вычисляемой наблюдаемой на пользовательскую привязку, что мне кажется хорошим решением:

ko.bindingHandlers.jqmFlip = {
    init: function (element, valueAccessor) {
        var result = ko.bindingHandlers.value.init.apply(this, arguments);
        try {
            $(element).slider("refresh");
        } catch (x) {}
        return result;
    },
    update: function (element, valueAccessor) {
        ko.bindingHandlers.value.update.apply(this, arguments);
        var value = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);
        try {
            $(element).slider("refresh");
        } catch (x) {}
    }
};



<select name="select-ismale" id="select-ismale" data-bind="jqmFlip: isMale.formattedValue" data-role="slider">
    <option value="false">No</option>
    <option value="true">Yes</option>
</select>

Вот рабочая скрипка: http://jsfiddle.net/FU7Nq/1/

Надеюсь, что это может помочь другим людям справиться с переключателем JQM Flip Switch.

Связывание с "истинной" логической наблюдаемой осуществляется через расширитель: это значение isMale.formattedValue.

Это очень чистое и мощное решение описано в блоге Тима (спасибо, Тим!).

Answer 2

Следует отметить две вещи -

Когда вы делаете проверяемое значение зависимым от чего-то, я полагаю, вам нужно использовать значение: привязка вместо проверенного: привязка.

Второе - вы устанавливаете его равным строке 'true' вместо логического true, но ваша привязка к логическому значению true.

Попробуйте эти настройки в своем переплете и дайте мне знать, если это не поможет.

Answer 3

ko.bindingHandlers.jqmBindFlipSwitch = {
    init: function (element, valueAccessor) {
        $(element).change(function () {
            var value = valueAccessor();
            value($(element).is(":checked"));
        }).blur(function () {
            var value = valueAccessor();
            value($(element).is(":checked"));
        });
    },
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);
        $(element).prop('checked', valueUnwrapped)
            .flipswitch().flipswitch('refresh'); 
    }
};

<input data-bind="jqmBindFlipSwitch: siteVisitRequired" type="checkbox" data-on-text="Yes" data-off-text="No" />

Кажется, это работает довольно чисто