javascript - optionsValue 和可观察数组的 knockout 问题

Question

对于这段代码

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>

您可能可以在 knockout 示例中找到它。问题是最后一个绑定(bind) meal().price 似乎在其上方存在 optionsValue 时不起作用。如果我删除 optionsValue 它工作得很好。我错过了什么吗？谢谢。

Answer 1

是的，你错过了一些东西。

在不指定 optionsValue 的情况下，您将绑定(bind)一个 meal 对象(来自 availableMeals 数组)到 meal订单的属性。 price 绑定(bind)查找您绑定(bind)的 meal 的 price 属性，它找到了它，因为它找到了这个对象:

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

这有效。

当您将 optionsValue 指定为 price 时，您将一个数字绑定(bind)到订单的 meal 属性。 price 绑定(bind)查找该数字的 price 属性，该属性不存在。

这都是正确的行为。当您确实需要指定的属性时，您应该只使用 optionsValue。这通常仅在您想要绑定(bind)到您已绑定(bind)到下拉列表的某个列表的 ID 时才需要，例如您可能从数据库中获得的列表。由于您在要绑定(bind)到的对象上使用其他属性(价格)，因此最好让它绑定(bind)整个对象，以便您以后可以使用整个对象。