knockoutjs中的计算可观察量不会随着更改而更新？

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属性。

这个jsFiddle演示了正在发生的事情 。 请注意，您必须单击刷新链接才能强制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/