ノックアウトとjQueryモバイル：チェックボックス

StackOverflow https://stackoverflow.com/questions/7804968

  •  25-10-2019
  •  | 
  •  

質問

チェックボックスとラベル要素をドキュメントに動的に追加しようとしています。チェックボックス要素には、[ViewModel内の観測可能な値にその値をバインドするKnockoutのデータバインド属性があります。ただし、実行してJquery Mobileでチェックボックスをスタイリングしようとすると 

$('input[type="checkbox"]').checkboxradio();

データバインド属性は削除されます。上記の行を除外すると、データバインド属性が適切に設定され、バインディングが機能します。

jQueryモバイルスタイリングとノックアウトバインディングの両方を同時に使用する方法はありますか？

JQuery Mobile RC1とノックアウト1.2.1を使用しています。

役に立ちましたか？

解決

また、この問題に遭遇しました。残念ながら、ここでのすべての提案は、私にとってはうまくいかなかったか、他の問題を抱えていました。そこで、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/

他のヒント

見る： https://gist.github.com/1006808

その後、次のようなことができます。

var $checkbox = $('input[type="checkbox"]');
$checkbox.checkboxradio();
$checkbox.dataBind({
    your options..
});

これが役立つことを願っています！

Jquery Mobileのようなスタイルのオブジェクトを使用して、ノックアウトのデフォルトチェックバインディングを使用することに問題があります。 Jqueryuiのボタン/ボタンセットが機能するのと同じ問題があります。チェックボックスの上にラベルがあり、何が起こっているのかを示し、標準のノックアウトチェックバインディングを介して適切に更新されません。

で議論されています http://therunningprogrammer.blogspot.com/2011/10/how-to-use-jquery-uis-button-with.html.

jQueryモバイルからこれらのスタイルのオブジェクトを使用してノックアウトを直接使用するには、異なるDOMコンテキストを処理するために、実証されたコードを変更する必要があります。コードの更新を投稿してください。

編集

の Googleグループ - ノックアウト, 、luv2hikeは解決策を投稿しました。で機能するのがわかります http://jsfiddle.net/luv2hike/nrjbc/. 。あなたの問題の実用的な修正のように見えます。

JQuery Mobile 1.2.0およびNockout 2.2.1で動作する簡単なバインディングを作成し、デフォルトのjQueryモバイルチェックボックスで動作します。このバインディングは、カスタムアイコンやjQueryモバイルのCSSスタイルに依存していません。また、HTMLで通常のチェックボックスマークアップを使用することもできます（<input type="checkbox" ... />）のような代替マークアップ要素を使用するのではなく div.

これがフィドルです： http://jsfiddle.net/thedude458/52bax/

ノート： 現在、この例は、リストではなく、単一のチェックボックスのみをサポートしています。これは、私が現在必要としているすべてです。また、バインドされたプロパティが観察可能であると想定しています。

JqueryMobileチェックボックス用に構築したカスタムハンドラーに関する私の重度のコメントコードは次のとおりです。

ko.bindingHandlers.checkbox = {
init: function(element, valueAccessor) {

    // set the dom element to a checkbox and initialize it (for jquerymobile)
    var checkbox = $(element);
    checkbox.checkboxradio();
    checkbox.attr('type', 'checkbox');

    // register change event to update the model on changes to the dom
    ko.utils.registerEventHandler(element, "change", function() {
        valueAccessor()(

            // off because it is before the ui has refreshed
            $(this).siblings('label.ui-checkbox-off').length > 0
        );
    });
},
update: function(element, valueAccessor) {

    // update the checked binding, i.e., check or uncheck the checkbox
    ko.bindingHandlers.checked.update(element, valueAccessor)

    // and refresh the element (for jquerymobile)
    var checkbox = $(element);
    checkbox.checkboxradio('refresh')
}
};
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top