Question

我正在http://learn.knockoutjs.com/#/?tutorial=collections的knockoutjs教程中，我丢失了我的可迭代项目foreach: seats。首先，我的观点看起来像：

<h2>Your seat reservations</h2>

<table>
    <thead>
        <tr>
            <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
        </tr>
    </thead>
    <!-- Todo: Generate table body -->
    <tbody data-bind="foreach: seats">
        <tr>
            <td><input data-bind="value: name"/></td>
            <td><select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
            <td data-bind="text: meal().price"></td>
        </tr>  
    </tbody>
</table>

<button data-bind="click: addSeat">Reserve another seat</button>

得到了

现在我有了

视图

<h2>Your seat reservations</h2>

<table>
    <thead>
        <tr>
            <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
        </tr>
    </thead>
    <!-- Todo: Generate table body -->
    <tbody data-bind="foreach: seats">
        <tr>
            <td><input data-bind="value: name"/></td>
            <td><select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
            <td><select data-bind="options: $root.availableMeals, value: price, optionsText: 'price'"></select></td>
        </tr>  
    </tbody>
</table>

<button data-bind="click: addSeat">Reserve another seat</button>

VM未更改

// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);
}

// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
    var self = this;

    // Non-editable catalog data - would come from the server
    self.availableMeals = [
        { mealName: "Standard (sandwich)", price: 0 },
        { mealName: "Premium (lobster)", price: 34.95 },
        { mealName: "Ultimate (whole zebra)", price: 290 }
    ];    

    // Editable data
    self.seats = ko.observableArray([
        new SeatReservation("Steve", self.availableMeals[0]),
        new SeatReservation("Bert", self.availableMeals[0])
    ]);

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

ko.applyBindings(new ReservationsViewModel());

有了这个新视图，我得到了

我知道淘汰是新的，但我不明白为什么将显示更改为选择字段应该中断可迭代的

Answer 1

看看开发者控制台，你会发现错误被抛出：

未捕获的ReferenceError：无法处理绑定“foreach：function （）{return seats}“消息：无法处理绑定”值：function （）{返回价格}“消息：价格未定义

问题是您尝试访问price上不存在的SeatReservation。由于抛出的错误，foreach的渲染会中断。

我认为你不想要price的下拉菜单，你只想显示他们选择的任何一餐的价格。

Answer 2

检查控制台将真正帮助您了解出现问题的原因。在我的控制台中，我用你的代码得到了这个。

所以它说价格没有定义。因此，如果确实存在价格对象，我们需要检查您的模型，然后没有。因此，您只需在模型中添加price属性。

function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);
    self.price = ko.observable();
}

添加选择字段会停止迭代; knockoutjs

2 个答案: