4

ここにテストケースがあります: http://tremby.net/knockouttest/page1.php

ページ遷移にはpjaxを使用しています。上記のテスト ケースのページ 1 とページ 2 の間をクリックすると、2 つのページが非同期に読み込まれ、#main要素のコンテンツが置き換えられます。その過程でブラウザーの履歴状態がプッシュされるため、ロケーション バーの URL が更新され、戻るボタンで元の場所に戻るはずです。

1 ページ目のリストには、ノックアウトのforeachバインディングと、List私が定義したモデル (ヘッドのインライン スクリプト内) が取り込まれています。1readyページ目では、インライン スクリプトが実行ko.applyBindingsされ、リストにデータが入力されます。

「アイテムの追加」ボタンはビューモデルにアイテムを追加し、ノックアウトはリストに追加します。

いくつかの項目を追加してからページ 2 に移動し、次にページ 1 に戻ると、リストは最初の 3 つの項目で新しくなり、項目の追加ボタンは引き続き機能します。これは、私たちのユースケースでは問題ありません。

いくつかの項目を追加してからページ 2 に移動しますが、ブラウザの [戻る] ボタンを使用してページ 1 に戻るのは、私の問題です。新しいアイテムは引き続き表示されます (これは良いことであり、ブラウザーの戻るボタンを使用する場合のユース ケースに不可欠です) が、「アイテムの追加」ボタンは壊れています。新しい項目を にプッシュするコードobservableArrayは確実に実行されていますが、バインディングが消えているようで、ノックアウトは新しい DOM 要素を追加することを認識していません。

ko.applyBindingsで機能を再度実行することはできませんpopstate。または、ノックアウトは、リスト内の各アイテムに対して現在存在する各アイテムを複製したいと考えるようになり、その後、「アイテムを追加」をクリックするたびに複数の新しいアイテムが得られます。

明らかに欠けているものがあると強く感じていますが、ドキュメントで役立つと思われるものは何も見つかりません。どんな助けでも大歓迎です。

4

1 に答える 1

1

ビューモデルを UI にバインドしたにもかかわらず、ページを期待どおりの状態に再構築するためにブラウザの履歴がアクセスできる場所にビューモデルを永続化していないため、この動作が発生しています。backこの動作は、ブラウザの組み込みのおよびforwardボタンを使用して観察することもできます。この問題を解決するために採用する通常のパターンは次のとおりです。

まず、this変数に割り当てます。これにより、後で手間が省けます。ビューモデルは次のようになります。

function List(items) {
    var self = this;
    self.items = ko.observableArray(items)
    self.addItem = function(text) {
        self.items.push(text)
    }
}

次に、ビューモデルの現在の状態をシリアル化する計算オブザーバブルを作成します。それをどのように実装するかは、完全にあなた次第です。

self.toJson = ko.computed(function(){
    /*** Serialise self.items() and return the string ***/
    return myJsonString;
});

次に、計算されたものを非表示の入力にバインドします。これにより、ビューモデルがフォームデータに永続化され、後でビューモデルを再水和できるようになります。

<input id="serialisedItems" type="hidden" data-bind="value: toJson" value="[1,4,3]" />

最後に、$.ready()この方法でビューモデルを再水和します。

$(function() {
    var items = $('#serialisedItems').val();
    /*** Deserialise items before passing into the List ***/
    var list = new List(deserialisedItems);
    ko.applyBindings(list);
});

この時点で、 の value 属性を設定することによってリストが初期化されていることも指摘しておきます<input>。

于 2013-11-12T09:39:30.370 に答える