0

OK、ノックアウト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が正しくないことはわかっていますが、基本的にはドロップダウンから食事を選択し、関連するサイズを2番目のドロップダウンに表示したいと考えています...

私は何を間違っていますか?!

4

1 に答える 1

0

現在、すべてのSeatReservationオブジェクトがアイテムの同じコピーを指している可能性があり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>

サンプルはこちら: http://jsfiddle.net/rniemeyer/HsDeG/

于 2013-01-11T23:18:09.800 に答える