3

このコードについて

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

function OrdersViewModel() {
    var self = this;
    self.availableMeals = [
        { menuItem:"Chicken", calories:1000, price:12 },
        { menuItem:"Eggs", calories:900, price:10 },
        { menuItem:"Fries",calories:700, price:15 }
    ];

    self.orders = ko.observableArray([
        new Order("Mike", self.availableMeals[0]),
        new Order("John", self.availableMeals[0]),
        new Order("Larry", self.availableMeals[0])
    ]);
    self.addOrder = function(){
        self.orders.push(new Order("", self.availableMeals[0]));
    }
}
ko.applyBindings(new OrdersViewModel());

私は次の見解を持っています

 <tbody data-bind="foreach: orders">
        <tr>
            <td><input data-bind="value: name" /></td>
            <td><select data-bind="options: $root.availableMeals, value: meal, optionsValue: 'price', optionsText: 'menuItem'"></select></td>
            <td data-bind="text: meal().price"></td>
        </tr>
    </tbody>

おそらくノックアウトの例で見つけることができます。問題は、optionsValueがその上に存在する場合、最後のバインディングmeal（）。priceが機能しないように見えることです。optionsValueを削除すると、問題なく動作します。私は何かが足りないのですか？ありがとう。

4

1 に答える 1

1

はい、何かが足りません。

を指定せずに、（配列からの）オブジェクトを注文のプロパティにoptionsValueバインドします。バインディングは、バインドしたのプロパティを検索し、次のオブジェクトを検出するため、それを検出します。mealavailableMealsmealpricepricemeal

{ menuItem:"Eggs", calories:900, price:10 }

これは機能します。

optionsValueとして指定すると、注文のプロパティにprice番号がバインドされます。バインディングは、存在しないその番号のmealプロパティを探します。priceprice

これはすべて正しい動作です。optionsValue指定するプロパティが実際に必要な場合にのみ使用してください。IDこれは通常、データベースから取得するような、ドロップダウンにバインドしたリストのにバインドする場合にのみ必要です。バインドするオブジェクト（価格）で他のプロパティを使用しているため、後でオブジェクト全体を使用できるように、オブジェクト全体をバインドすることをお勧めします。

于 2012-11-08T23:43:59.397 に答える