1

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 フリップ スイッチ トグルとノックアウトを組み合わせる最良の方法はどれですか?

jsFiddle はこちら: http://jsfiddle.net/nmq7z/

すべてに前もって感謝します

更新:より良いテスト ケース: http://jsfiddle.net/FU7Nq/

4

3 に答える 3

3

わかった、

私の最初のコードが本当に悪いことを指摘してくれた kadumel に感謝します。次に、計算されたオブザーバブルからカスタムバインディングに切り替えましたが、これは良い解決策のようです:

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 フリップ スイッチ トグルに対処するのに役立つことを願っています。

「真の」ブール値オブザーバブルとのバインディングは、エクステンダーを介して実現されます。これが isMale.formattedValue の意味です。

この非常にクリーンで強力なソリューションは、Tim のブログ (Tim さん、ありがとうございます) で説明されています。

于 2013-07-18T10:11:47.053 に答える
1 
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" />

これはかなりきれいに動作するようです

于 2015-11-09T01:40:26.183 に答える
1

2つの注意事項 -

チェックされた値を何かに依存させる場合、checked: binding の代わりに value: binding を使用する必要があると思います。

2番目-ブール値のtrueではなく「true」の文字列に等しく設定していますが、バインディングはtrueのブール値です。

バインディングでこれらの調整を試してみて、それでも問題が解決しない場合はお知らせください.

于 2013-07-07T17:47:38.250 に答える