编辑淘汰赛模型答案

【问题标题】：Edit the Knockout model编辑淘汰赛模型
【发布时间】：2014-04-08 00:11:05
【问题描述】：

我有一个 Knockout 模型，我使用 foreach 绑定将其显示在表格中。我在每一行都有一个编辑按钮，当我点击编辑按钮时，我想在输入字段上显示数据，我想在那里编辑它，这应该会更新回淘汰模型。

我有一个示例 jsFiddle here，我正在努力使用敲除将所选行绑定到输入字段。

请指导我将所选行绑定到输入字段。

HTML 代码：

<div>
<div>
    <table>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
        <tbody data-bind="foreach: players">
            <tr>
                <td data-bind="text: name"></td>
                <td data-bind="text: age"></td>
                <td data-bind="text: country"></td>
                <td>
                    <button data-bind="click: $root.editPlayers">Edit</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div>
    <h3>Edit</h3>
    Name:
    <input type="text" data-bind="value: name" />
    <br/>Age:
    <input type="text" data-bind="value: age" />
    <br/>Country:
    <input type="text" data-bind="value: country" />
    <br/>Tropies:
    <select data-bind="options: trophies, optionsText: 'Select Trophy'"></select>
</div>

JavaScript

    var player = function (name, age, country) {
    this.name = ko.observable(name);
    this.age = ko.observable(age);
    this.country = ko.observable(country);
    this.trophies = ko.observableArray['AO','US'];
};

var playerModel = function () {
    var self = this;
    self.players = [
    new player('Roger', 32, 'swiss'),
    new player('Stan', 28, 'swiss')];

    self.trophies = ['AO','US','FO', 'WB'];

    self.editPlayers = function (data) {
        console.log(data.name());
    }

}

ko.applyBindings(new playerModel());

【问题讨论】：

标签： knockout.js

【解决方案1】：

您的问题不在播放器列表中，而是在您的编辑播放器中 - 您需要将其绑定到一个对象，例如“editPlayer”，并在单击编辑按钮时将当前播放器设置为该播放器。

http://jsfiddle.net/LCFua/2/

<div data-bind="with: editPlayer">
    <h3>Edit</h3>
    Name:
    <input type="text" data-bind="value: name" />
    <br/>Age:
    <input type="text" data-bind="value: age" />
    <br/>Country:
    <input type="text" data-bind="value: country" />
    <br/>Tropies:
    <select data-bind="options: trophies, optionsText: 'Select Trophy'"></select>
</div>

使用with 绑定将该div 绑定到editPlayer。此外，如果您想使用多选来选择多个奖杯，您需要对您的选择列表进行一些更改。

【讨论】：