使用有效的字段中断输入框；淘汰赛JS答案

【问题标题】：using valid field breaks input box; knockoutJS使用有效的字段中断输入框；淘汰赛JS
【发布时间】：2016-06-14 03:59:19
【问题描述】：

来自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 循环正在遍历座位预订。为什么不直接显示人名，为什么会转到默认餐值？谢谢

【问题讨论】：

标签： javascript html knockout.js

【解决方案1】：

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

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

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

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

如果您查看 <input> 元素，您会看到这一点，该元素使用 value 访问器将预订的所有者名称拉入字段。

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

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

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

请参阅 My Sample 以显示您正在处理的示例中的不同之处。

我希望这有助于澄清这个示例的一些情况。

【讨论】：

【解决方案2】：

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

【讨论】：

我不明白为什么它不会显示名称。名称是不可观察的，它是一个字符串

【解决方案3】：

分解<select>中的绑定：

options 需要一个数组来填充下拉列表
optionsText 允许您指定要显示为文本的项目的属性
value 是您保存选定值的位置

【讨论】：