敲除js中的计算可观察值不会随变化而更新？

Question

我目前正在学习knockoutjs，我只是按照knockoutjs官方网站上关于列表和收集的教程，目前我拥有的是一个下拉列表，其中列出了我拥有的项目，然后旁边是一个显示的文本文本（价格），现在我想要发生的是显示的文本应该根据下拉菜单的选定项而改变。

这是我的代码的 jsfiddle：http://jsfiddle.net/UQskS/

另外，如果您发现我的代码除了我上面提到的之外还有问题，请给我建议，以获得最佳实践或更正。

// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) {
    //var self = this;
    //self.name = ko.observable(name);
    this.name = name;
    this.meal = ko.observable(initialMeal);
    this.formattedPrice = ko.computed(function () {
        var price = this.meal().price;
        return price ? "$" + price.toFixed(2) : "None";
    }, this);
}

function ReservationsViewModel(name, meal) {
    //var self = this;
    // Non-editable catalog data - would come from the server
    this.availableMeals = [
        { mealId: 1, mealName: "Standard (sandwich)", price: 47.55 },
        { mealId: 2, mealName: "Premium (lobster)", price: 34.95 },
        { mealId: 3, mealName: "Ultimate (whole zebra)", price: 290.123 }
    ];

    //editable data
    this.seats = ko.observableArray([
        new SeatReservation("Randel", this.availableMeals[2]),
        new SeatReservation("Knockout", this.availableMeals[1])
    ]);

    //operations
    this.addSeat = function () {
        this.seats.push(new SeatReservation("", this.availableMeals[0]));
    };

    this.removeSeat = function (seat) {
        this.seats.remove(seat);
    ;}
}

ko.applyBindings(new ReservationsViewModel());

先生/女士，您的回答会很有帮助。谢谢++

Answer 1

与当前的编码方式相比，您真正需要改变的唯一一件事是选项绑定参数。

您正在使用optionsValue，然后尝试更新meal 属性上的ID。这只会覆盖mealId 属性而不更改它所引用的对象。

This jsFiddle demonstrates what is going on。请注意，您必须单击刷新链接才能强制更新 UI，因为 mealId 不是可观察的。

要解决此问题，您只需将值直接绑定到所选对象即可。

<select data-bind="
    options: $root.availableMeals,
    value: meal,
    optionsText: 'mealName',
    optionsCaption: 'Choose...'">
</select>

这是更新（和工作）的小提琴：http://jsfiddle.net/jwcarroll/nrHcs

更新：

如果您想使用mealId，因为您将从数据库中提取这些值，那么在某些时候您将不得不进行查找以获取其他值。您可以预先支付价格，也可以在储蓄时支付。

这是一个更新的小提琴，它显示了您如何完成此任务的一种方法。

http://jsfiddle.net/jwcarroll/YAMS5/