1

私はこれについていくつかの調査を行いましたが、KOとJQMについては特に経験がありません。

明らかに、KOがいくつかのJQMコントロールとうまく機能するためには、いくつかのカスタムバインディングが必要です。しかし、次の問題に直面したときに最適なデザインが何であるかはわかりません。

個別のdivを持つ単一のindex.htmlファイルがありますdata-role="page"。

アプリケーション全体で多くの共有ロジックがあるため、ページごとに個別のビューモデルを用意することは必ずしも意味がありません。そのため、現在、一度viewModel呼び出している単一のオブジェクトがありますapplyBindings。当然、これは最初のページが読み込まれると発生します。

問題は、ユーザーが次のページに移動するまでJQMが後続のページの要素を変更せず、applyBindings呼び出された時点でhtmlが変更されないままになることです。カスタムバインディングが初期化されると、まだ変更されていないhtmlで機能します。

簡単な例（コードを貼り付けない場合）は、 JQMがそれ自体を作成する前に呼び出すKnockoutjs、jqueryモバイルスライダーです。slider('refresh')slider

イベントで変更されたhtmlにアクセスできることは知っていますpageinitが、問題は、カスタムバインディングのイベントと、カスタムバインディングが使用されているページのイベントの2つの相互依存イベントがあるinitことpageinitです。これを回避する最善の方法がわかりません。

最初のアイデア：

  1. 各カスタムバインディング内の不一致を処理するだけです。これは例で行われています。たとえば、呼び出しをラップして、JQMがtry...catchで初期化するものを更新します。私はこれが好きかどうかわかりません。

  2. 別々のhtmlファイルに分割します。共通のデータがたくさんあり、パフォーマンスに影響を与えるため、これも好きかどうかはわかりません。

  3. 分割しviewModelて別の要素に適用してから、それぞれのpageinitイベントの各ページにのみバインディングを適用します。ほとんどのビューモデルはすべてのページに必要であるため、これには少し再設計が必要になります。

  4. JQMに事前にページを初期化させる方法はありますか？もしそうなら、これは悪い動きでしょうか？

  5. KOカスタムバインディングがいつ初期化されるかを制御する方法はありますか？それに関する問題は、個々のページへのカスタムバインディングを効果的に調整していることです。

  6. Javascriptでバインディングを追加します（例：https ：//groups.google.com/forum/？fromgroups =＃！topic / knockoutjs / N33EzQ5nWUU） 。これについてはよくわかりませんが、あまりきれいではないようです。

他に何か提案はありますか？人々はこれまでこの問題にどのように取り組んだことがありますか？

4

1 に答える 1

0

それが誰かを助ける場合に備えて、私はスライダーのオプション1（ Knockoutjs、jqueryモバイルスライダーに基づく）を次のカスタムバインディングで試しました：

ko.bindingHandlers.slider = {
    init: function (element, valueAccessor) {
        function setSliderValue(newValue) {
            var slider = $("#" + element.id);
            slider.val(newValue);
            slider.slider('refresh');
            slider.on('change', function () {
                valueAccessor()(slider.val());
            });
        }
        valueAccessor().subscribe(setSliderValue);
    }
};

ページが初期化された後にのみ、オブザーバブルに必要な初期値を設定するための追加のコードを使用します。

$("#myPage").on('pageinit', function () {
    viewModel.myPage.myObservable(1000);
});

これは完璧ではなく、KO + JQMの世界をさらに探求するときに、他のコントロールで遭遇する問題を解決することはできません。

編集：上記を微調整し、JQMで生成された戻るボタン（からdata-add-back-btn="true"）のバインディングも追加しました。これは、いくつかの用途に使用される可能性があります。

ko.bindingHandlers.back = {
    init: function (element, valueAccessor) {
        function setBackBind(boundFunction) {
            $("#" + element.id)[0].children[0].children[0].id = element.id + "-backbutton";            
            $("#" + element.id + "-backbutton").on('click', ko.utils.unwrapObservable(valueAccessor()));
        }
        valueAccessor().subscribe(setBackBind);
    }
};

pageinit次に、スライダーを監視可能に設定すると同時に、監視可能な戻るボタンを目的の機能に設定します。

于 2013-01-24T16:31:52.147 に答える