Javascript knockoutj2中嵌套的下拉列表我做错了什么？

好的，我正在尝试让我的头绕过击倒JS嵌套下拉列表

基本上我想从绑定的下拉列表a中选择一个选项，并让下拉列表b显示相关的选项

以下是我从淘汰赛教程中摘取并修改的模型：

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

        // Overall viewmodel for this screen, along with initial state
        function ReservationsViewModel() {
            var self = this;

            // Non-editable catalog data - would come from the server
            self.availableMeals = ko.observableArray([
                { mealName: "Standard (sandwich)", price: 0, Sizes: [{ Desc: "large" }, { Desc: "medium" }, { Desc: "small" }] },
                { mealName: "Premium (lobster)", price: 34.95, Sizes: [{ Desc: "large1" }, { Desc: "medium1" }, { Desc: "small1" }] },
                { mealName: "Ultimate (whole zebra)", price: 290, Sizes: [{ Desc: "large2" }, { Desc: "medium2" }, { Desc: "small2" }] }
            ]);


            // Editable data
            self.seats = ko.observableArray([
                new SeatReservation("Steve", self.availableMeals[0]),
                new SeatReservation("Bert", self.availableMeals[0])
            ]);


        }

        ko.applyBindings(new ReservationsViewModel());

然后我的html：

<tbody data-bind="foreach: seats">
    <tr>
        <td><input data-bind="value: name" /></td>
        <td><select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
         <td data-bind="with: $root.availableMeals">
                    <select data-bind='options: $parent.Sizes, optionsText: "Desc", optionsCaption: "Select...", value: Desc'> </select>
                </td>
        <td data-bind="text: meal().price"></td>
    </tr>    
</tbody>

现在我知道我的html可能是不正确的，因为我已经花了很多时间试图让它工作，但基本上我想从下拉菜单中选择一顿饭，并在第二个下拉菜单中显示它的相关大小

---

我做错了什么

目前，所有

SeatServation

对象都指向潜在的

availableMeal

项目的相同副本

如果每个预订都能够自定义“大小”，那么您可能希望将大小存储在预订对象上。也许像：

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

然后你可以像这样绑定：

  <td data-bind="if: meal">
    <select data-bind='options: meal().Sizes, optionsText: "Desc", optionsCaption: "Select...", optionsValue: "Desc", value: size'></select>
  </td>

---

这里的示例：

好的，非常好，谢谢，看到它在我的机器上运行，事情也变得更清楚了！！