2

少し前にノックアウトのチュートリアルに従ったのはどれ ですか http://learn.knockoutjs.com/#/?tutorial=collections

リストとコレクションの作成方法を詳しく説明します。ただし、リスト内でカスケード ドロップダウン選択を作成したいと考えています。

私の質問は、ノックアウトを使用して、このような動的リストでカスケード ドロップダウンを作成できますか?

たまたま、数時間調べた後、実際に質問を解決できたので、誰かにとって役立つと思うので、ここに回答として追加します。多分それを行うより良い方法がありますか？

4

2 に答える 2

2

それは機能しますが、1 つだけ追加します: small caching。基本的に、特定の食事に利用できる食事をロードしたら、それらを保存するために食事オブジェクトにプロパティを作成できます。そうすれば、後続の呼び出しで、これらの食事がすでに読み込まれていることがわかる場合があります。そのために、次のように監視可能な配列を作成しました。

サーバーからのデータの取得をシミュレートする次の関数が与えられた場合:

var mealTypesByKey = [];
mealTypesByKey[1] = [{ mealName: "Vegemite Sandwich", price: 4.00, mealType: 1},
                     { mealName: "Cheese Sandwich", price: 34.95,mealType: 2 },
                     { mealName: "Jam Sandwich", price: 290, mealType: 3 } ];
mealTypesByKey[2] = [{ mealName: "Standard (Ham)", price: 15, mealType: 1},        
                     { mealName: "Chicken Wrap (Possibly rat)", price: 15, mealType: 1} ];
mealTypesByKey[3] = [{ mealName: "Premium (lobster)", price: 34.95,mealType: 2 },
                     { mealName: "Ultimate (whole zebra)", price: 290, mealType: 3 } ];

function serverGetMealsForType(key) {
    return mealTypesByKey[key];
}

次のサブスクライブ可能な関数を定義できます。

self.mealType.subscribe(function(newMealType) {
    if(!newMealType.meals) {
        newMealType.meals = ko.observableArray([]);
        newMealType.meals(serverGetMealsForType(newMealType.key));
        console.log("meals loaded");
    } else {
        console.log("meals already available for meal type " + newMealType.key);
    }
});

そうすれば、動的リストは指定されたバインディングで適切に再作成されます。

<td><select data-bind="options: mealType().meals, value: meal, optionsText: 'mealName'"></select></td>

これは、不要なサーバー呼び出しを避けるための一般的で簡単な手法です。

編集：フォークしたフィドルを追加するのを忘れました。

于 2013-05-17T17:30:37.023 に答える
1

コレクションのチュートリアルの元のバージョンは、learn.knockoutjs.com から入手しました。選択すると利用可能な食事を変更する食事の種類の選択を追加することにしました。

利用可能な食事は、それぞれ変更されるため、個々のリスト項目に移動する必要があることを発見しました

function SeatReservation(name, initialMeal, initialMealType) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);

    // Non-editable catalog data - would come from the server
    self.availableMeals = ko.observableArray([
        { mealName: "Standard (sandwich)", price: 0, mealType: 1},
        { mealName: "Premium (lobster)", price: 34.95,mealType: 2 },
        { mealName: "Ultimate (whole zebra)", price: 290, mealType: 3 }
    ]);

個別の予約内にも食事の種類を作成しました。

self.mealType= ko.observable();

次に、利用可能な食事の種類のリスト:

// Non-editable catalog data - would come from the server
self.availableMealTypes = [
    { mealTypeName: "Vege", key: 1 },
    { mealTypeName: "Dead Animal", key: 2 },
    { mealTypeName: "Meat Whore", key: 3}
];

その後、HTML にバインドされました。

最後に、食事の種類の変更をサブスクライブし、この関数で利用可能な食事のコレクションを変更しました。

 self.mealType.subscribe(function() {
    if (self.mealType().key == 1)
    {
        self.availableMeals ([
        { mealName: "Vegemite Sandwich", price: 4.00, mealType: 1},
        { mealName: "Cheese Sandwich", price: 34.95,mealType: 2 },
        { mealName: "Jam Sandwich", price: 290, mealType: 3 }    ]);
    }

最終的で完全なソリューションは、この jsFiddleで見ることができます。

于 2013-05-17T17:00:12.380 に答える