私はあなたの質問を正しく理解していると100%確信していませんが、私はそれに挑戦します:)
あなたはそれを書きます:
CountriesDropDown=すべての国をロードします...
これに基づいて、knockoutJSビューモデルを初期化するときに、国のリストを表すドロップダウン/要素の可能な値を含む監視可能な配列を初期化できます。select
これを行うには、AJAXリクエストを作成して、ドロップダウンに入力するために必要なデータを取得します。例:
// Get all countries
$.getJSON("/GetAllCountries", function(data) {
// Add the new data to the observable array holding the list of countries
});
ビュー内のデータ表現とバインディングには、ビューモデル内の監視可能な配列を使用することをお勧めします(監視可能な配列は、配列に変更を加えるとすぐにUIに影響します)。options
次に、3つのドロップダウンのそれぞれで選択された値を表す3つのオブザーバブルを持つことができます-例:
self.selectedCountry = ko.observable();
self.selectedState = ko.observable();
self.selectedCity = ko.observable();
(options
バインディングを使用すると、パラメーターを使用して選択した値を含める「フィールド」を指定できることに注意してvalue
ください。)
あなたが書いた前の引用を続けます:
CountriesDropDown =すべての国を読み込み、選択した都市のCountryIDを持つ国を選択します
これを実現するために、特定の都市が対応する国をWebサーバーに尋ねるAJAXリクエストを行うことができます。その結果を使用して、次のようなノックアウトを使用して、国のドロップダウンの選択された値を変更できます。
self.selectedCountry(theCountryToBeSelected);
次に、次のように記述します。
StatesDropDown=選択した国のすべての州をロードします
これを実現するために、オブザーバブルの変更をサブスクライブするノックアウトの機能を利用できます。選択した国が変更された場合、州のドロップダウンの内容を変更できます(例:次のように)。
self.selectedCountry.subscribe(function(newSelectedCountry) {
// Get all states based on the new selected country
$.getJSON("/GetStatesForCountry/" + newSelectedCountry.id, function(data) {
// Add the new data to the observable array holding the list of states
});
});
そして最後に、あなたはこう書きます:
CitiesDropDown=選択した州のすべての都市をロードします
これを実現するには、上記と同じ原則を適用できます。選択した状態のIDに基づいてAJAXリクエストを作成し、サーバーから返されたデータを使用して都市のリストを表す監視可能な配列にデータを入力します。
これがあなたが探しているものではない場合、私は少なくともあなたに刺激を与えたり、あなたを正しい方向に向けることができたことを願っています:)