2012-04-03 8 views
2

私はknockout.jsを使って、ユーザーが多数の異なるトピックで自分のデータをフィルタリングできるGUIを作成しました。これらのトピックのほとんどは、コンボボックス(combobox)アイテムで表され、htmlの選択アイテムです。初期化時に更新を無効にする方法はありますか?

ノックアウトを使用して、すべてのフィルタ選択の変更を購読しました。サブスクリプションイベントは、フィルタ設定を収集し、これをajax経由でサーバに送信し、フィルタバックを満たす項目のリストを取得する関数を呼び出すだけです。

さらに、サーバーからのデータには、選択ごとに使用可能なフィルタトピックも含まれています。

私はいつもGUIが完全に利用可能になってからしばらく時間がかかっていたので、起動速度について疑問を抱いていました。ちょっと前に私はデータ配信機能にブレークポイントを設定し、起動時に約20回呼び出されるのはかなり驚いていました。 :-(

どのように私は


var viewModel = { 
    entries: ko.observableArray(),   // this is receiving the filtered items 

    selectedMode: ko.observable(null),   // Filter 1 initialized to null 
    selectedSubMode: ko.observable(null),  // Filter 2 initialized to null 
    . 
    . 
    availableModes: ko.observableArray(),  // Available filter items 1. 
    availableSubModes: ko.observableArray(), // Available filter items 2. 
}; 
 

html要素は次のようにバインドされ、これを防ぐことができます:私はselectedItemsの単一の負荷を発行するページのロード時に

 

<select 
    id="selectMode" 
    tabindex="1" 
    data-bind="options: availableModes, 
       value: selectedMode, 
       optionsCaption: 'Any'" 
> 
</select> 
 

?すべてが「null」であることを選択します。したがって、使用可能なすべてのデータの最初のページが返され、availableModesとavailableSubModesをデータで返される使用可能な項目に設定します。

次に、最初の選択ボックスは、その表示をoptionsCaptionとしてバインディングで設定した "Any"値に変更します。そして、これは変更イベントを引き起こすようです。これにより、サーバーへの要求が再び開始され、次の選択項目は「すべて」に設定されます。これは、すべての選択要素に対して繰り返されます。

どのように私はこれが起こるのを防ぐことができる考えを持っていますか?

私の最初のアイデアは、データの読み込み中にノックアウトの更新を無効にし、更新が完了した後で強制的に更新を行うことでした。しかし、私はそれに適した方法を見つけることができませんでした。任意のヒントについて

おかげで...

+0

ドロップダウンの変更をどのように購読しますか? –

+0

Iは、選択項目のそれぞれについて、以下を使用: viewModel.selectedMode.subscribe(関数(){; viewModel.loadData()})。 loadDataは、サーバーに要求を送信し、返されたデータを使用する関数です。 – nttakr

+0

ちょうど考えて...オブザーバブルに購読するのではなく、ドロップダウンの変更イベントを購読するとどうなるでしょうか? –

答えて

2

購読する方法と、あなたの完全なコードなどを見なければ、それは間違っている正確に何を言うのは難しいです。しかし、私は、あなたが変更イベントを引き起こす「任意」にセレクトされたことを述べた部分に気付きました。私はあなたが描写していることに基づいてこれを説明できると思う。

KOオプションからドキュメントをバインドします。

KOは、テキスト は「...項目を選択し、」表示され、未定義の値を持つものと項目のリストの前に付けます。したがって、myChosenValue が未定義の値(デフォルトで観測可能)を保持する場合は、 ダミーオプションが選択されます。

これは、selectedMode値をnullに設定すると、「Any」の値と一致しないことを意味します。バインディングはあなたの既存の値と一致しようとします。そうでないと、selectModeをundefinedに設定し、変更をトリガーします。

これを実行してください。サーバーフェッチログステートメントの呼び出しを見ることができます。selectedMode null代入を削除すると、logステートメントは起動しません。

http://jsfiddle.net/madcapnmckay/H7jzd/

これは完全に物事を解決しない場合は、あなたの完全なセットアップといくつかの偽のAJAX文をサブスクライブをいじると含まフォーク、我々はそれが働いて得ることができる必要があります。

希望します。

関連する問題