Question

来自http://learn.knockoutjs.com/#/?tutorial=collections

更改

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

到

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

导致输入框中断。如果损坏，当您更换餐点时附加费不会更新，并且默认餐名与价格不符（总是第一餐，有时是第二价）

// 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[1]),
        new SeatReservation("Bert", self.availableMeals[0])
    ]);
    
    // Operations
    self.addSeat = function() {
        self.seats.push(new SeatReservation("", self.availableMeals[0]));
    }
}

ko.applyBindings(new ReservationsViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<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: name, optionsText: 'mealName'"></select></td> 
            <td data-bind="text: meal().price"></td>
        </tr>
    </tbody>
    
</table>

<button data-bind="click: addSeat">Reserve another seat</button>

name是SeatReservation中的有效字段，此for循环正在迭代座位预订。为什么不只是显示这个人的名字，为什么它会达到默认的膳食价值？谢谢

Answer 1

如上所述，第一个问题是您尝试将下拉列表中的值分配到名称字段（这是写入value: name的部分）。

如果您想在下拉字段中显示不同的内容，则需要修改 optionsText 属性，类似于：

<td><select data-bind="options: $root.availableMeals, value: name, optionsText: 'desiredPropertyNameGoesHere'"></select></td>

这是因为下拉列表中呈现的文本被optionsText属性拉入选择中。 value绑定为可观察的值分配值。 text绑定显示来自observable的值。我认为可能发生的事情是你混淆了text和value绑定的行为。当我第一次开始时，我也犯了这个错误。

您可以看到，如果您查看使用<input>访问者的value元素将预订的所有者名称拉入字段。

<td><input data-bind="value: name"></input></td>

如果您使用其他HTML元素（例如<span>）执行此操作，则需要使用以下绑定设置：

<td><span data-bind="text: name"></span></td>

请参阅My Sample以显示您正在处理的示例中的差异。

我希望这有助于澄清一些示例的内容。

Answer 2

meal是一个可观察的，值绑定需要一个observable将选定的值放入其中，否则，选择不同的值后没有任何变化

Answer 3

分解<select>：

中的绑定

options使用数组填充下拉列表
optionsText允许您指定项目的属性以显示为文本
value是您保存所选值

使用有效的分段输入框; knockoutJS

3 个答案: