optionsValue 和 observable 数组的淘汰赛问题答案

【问题标题】：Knockout issue with optionsValue and observable arrayoptionsValue 和 observable 数组的淘汰赛问题
【发布时间】：2012-11-08 23:17:53
【问题描述】：

对于这段代码

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>

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

【问题讨论】：

标签： javascript knockout.js observable

【解决方案1】：

是的，你错过了什么。

如果不指定optionsValue，则将meal 对象（来自availableMeals 数组）绑定到订单的meal 属性。 price 绑定在您绑定的meal 上查找price 属性，并找到它，因为它找到了这个对象：

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

这行得通。

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

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

【讨论】：