Question

我目前正在研究knockoutjs，我刚刚在knockoutjs的官方网站上关注列表和集合的教程，目前我所拥有的是一个下拉列表，其中列出了我拥有的项目，然后与之相邻的是显示的文本文本（价格），现在我想要发生的是显示的文本应该根据下拉列表的选定项目进行更改。

这是我的代码的一个方面：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/

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

1 个答案:

更新