0

jquery モバイルとノックアウト js の統合に関する質問がたくさんあることは承知していますが、問題を解決するスレッドが見つかりませんでした。子ビュー モデルを含むマスター ビュー モデルがあるため、ページの読み込み時にこれを初期化します。そのイベントはアプリケーションの読み込み時にのみ発生するためです。

var viewModel = null;

$(function () {
    console.debug("running init");
    viewModel = new ViewModel();
    ko.applyBindings(viewModel);
});

これはアプリの最初のページではうまく機能しますが、子ページに移動すると、jquery モバイルが html を動的にロードし、ノックアウトがバインドされたコンテンツを更新することを知らないため、ノックアウト js コンテンツが表示されません。関数を使用して動的に更新するように指示しようとしてい$(document).delegateますが、実装方法に苦労しています。

<ul id="speeding" data-role="listview" data-bind="foreach: speeding.items">
    <li>
        <h3 class="ui-li-heading" data-bind="text: Address"></h3>
        <p class="ui-li-desc" data-bind="text: Address2"></p>
        <p class="ui-li-desc" data-bind="text: PrettyDate"></p>
        <p class="ui-li-aside" data-bind="text: SpeedMph"></p>
    </li>

    <script type="text/javascript">
        var loaded = false;
        $(document).delegate("#page-speeding", "pagebeforecreate", function () {
            if (!loaded) {
                loaded = true;
                ko.applyBindings(viewModel);
            }
            else {
                $("#speeding").trigger("refresh");
            }
        });
    </script>
</ul>

明らかにデリゲートを使用するための要件であるため、呼び出されているページ内にデリゲート関数を配置しています。次に、この子ページの最初の読み込み時に ko.applyBindings を呼び出します (アプリケーションの読み込み時にのみ呼び出したかったのですが、trigger("create") を機能させることができませんでした。その後の呼び出しでは、trigger("refresh") を呼び出します) (これは私にはうまくいきません。)問題は、子ページに移動するたびにデリゲート関数が追加されることです.そのため、子ページの最初のロード時に、デリゲート コールバック関数が 1 回呼び出されます.メイン ページに戻り、次に子ページに戻ると、デリゲート コールバックが 2 回呼び出されます。

誰かが子ページのノックアウト バインディングを更新するための推奨されるアプローチのガイダンスを提供できますか?

4

1 に答える 1