Question

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

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

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

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());

Answer 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。此外，如果您想使用多项选择来选择多个奖杯，您需要对选择列表进行一些更改。

编辑Knockout模型

1 个答案: