1

同じノックアウト ビューモデル メンバーにバインドされた 2 つの jQuery Mobile チェックボックスがあります。1つのチェックボックスをクリックしてビューモデルを更新し、次に他のチェックボックスもチェックされるように更新することを期待しています。こちらの例を参照してください

HTML

<span data-bind="text: chk"></span>
<input id="checkbox1" name="" data-bind="checked: chk" type="checkbox">
<label for="checkbox1">A</label>
<input id="checkbox2" name="" data-bind="checked: chk" type="checkbox">
<label for="checkbox2">B</label>

Javascript

function ViewModel(){
var self = this;

self.chk = ko.observable(false);
}

ko.applyBindings(new ViewModel());

モデルが更新され、テキスト フィールドにその値が表示されていることがわかります。しかし、チェックボックスはそうではありません

4

2 に答える 2

5

問題は、基礎となるチェックボックス コントロールの状態が変更されたときに、jQuery Mobile がチェックボックスのカスタム描画を更新する必要があることですが、Knockout を介してプログラムで変更すると、jQuery Mobile はそれを検出できません。onclick イベントのみを検出します。これは、カスタム ノックアウト バインディングを介して行う必要があります。

KO のすべてのバージョン (最新の v3 を含む)で動作するシンプルなカスタム バインディングを作成しました。

ko.bindingHandlers.jqmChecked = {
    init: ko.bindingHandlers.checked.init,
    update: function (element, valueAccessor) {
        //KO v3 and previous versions of KO handle this differently
        //KO v3 does not use 'update' for 'checked' binding
        if (ko.bindingHandlers.checked.update) 
            ko.bindingHandlers.checked.update.apply(this, arguments); //for KO < v3, delegate the call
        else 
            ko.utils.unwrapObservable(valueAccessor()); //for KO v3, force a subscription to get further updates

        if ($(element).data("mobile-checkboxradio")) //calling 'refresh' only if already enhanced by JQM
            $(element).checkboxradio('refresh');
    }
};

次のように使用する必要があります。

<input type="checkbox" data-bind="jqmChecked: someValue" id="checkbox1"/>

ここで完全な作業例を参照してください。

http://jsfiddle.net/srgstm/ub6sq/

于 2013-10-31T14:56:54.987 に答える
2

あなたの問題は、ノックアウトではなく Jquery モバイルにリンクされています。私が見つけた唯一の解決策は、モデルでサブスクリプションを使用して回避することでした。

function myViewModel(){
    var self = this;
    self.chk2      = ko.observable(false);
    self.chk       = ko.observable(false);
    self.chk.subscribe(function(newValue) {
        console.log (newValue);
        //Handle jQuery Mobile
        $("input[data-bind='checked: chk']").each(function(){
            if ($(this).is(':checked') != newValue)  {
                $(this).prop('checked', newValue).checkboxradio("refresh");
            }
        });
    });
}



ko.applyBindings(new myViewModel());

ここで jsFiddle: http://jsfiddle.net/9QSaY/

于 2013-09-30T03:42:10.973 に答える