如何使用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淘汰赛

回答

相关问题