如何使用MVC淘汰賽

我跟着淘汰賽創建一個動態列表中的級聯選擇下拉教程一段時間，其中前他們中的一個 http://learn.knockoutjs.com/#/?tutorial=collections 如何使用MVC淘汰賽

詳細介紹瞭如何創建列表和集合。但是我想在列表中創建一個級聯下拉選擇。

我的問題本來是你可以在動態列表中創建一個級聯下拉使用淘汰賽？

事實上，我已經設法解決了這個問題，經過幾個小時的研究後，所以將它添加到這裏作爲答案，因爲我認爲它可能對某人有用。也許有更好的方法來做到這一點？

2013-05-17 Chris Nevill

它會工作，但我只會添加一件事：小緩存。基本上，一旦你裝滿了給定的膳食可用餐，你可以創建一個屬性在你的膳食對象來存儲它們。這樣，隨後的電話可能會知道這些飯菜已經加載。我創建了一個可觀察的數組，像這樣：

鑑於此功能從服務器模擬檢索數據：

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>

這是避免不必要的服務器調用的常用技巧。

編輯：忘了添加fiddle I've forked。

來源

2013-05-17 17:30:37 Jalayn

非常感謝！ –

我已經添加了一個稍微修改版本的答案，它使用KO Computed而不是訂閱： http://jsfiddle.net/MEwsU/ 這是一個教育活動，而不是任何事情。 –

是的，事實上它甚至更好！ – Jalayn

我從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} 
];

然後將其綁定t o在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 } ]); 
    }

最終的和完整的解決方案可以在this jsFiddle可見。

來源

2013-05-17 17:00:12

如何使用MVC淘汰賽

回答

相關問題