3

我目前正在学习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());

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

4

1 回答 1

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/

于 2013-08-06T01:21:55.453 回答