javascript - 如何在具有多个字段的页面上使用 Knockout 的“hasfocus”点击编辑（示例 2）：值对

Question

如何在具有多个字段：值对的页面上的点击编辑（示例 2）中使用 Knockout 的“hasfocus”绑定？我有一个查看客户详细信息的页面，我希望能够在双击时进行编辑。

Answer 1

您需要创建一个 PersonViewModel 数组并在视图中 foreach 循环它们。要重用淘汰页面上的示例，代码可能如下所示：

    (function () {
        function PersonViewModel(name) {
            // Data
            this.name = ko.observable(name);
            this.editing = ko.observable(false);

            // Behaviors
            this.edit = function() { this.editing(true) }
        }

        function ViewModel(personModels) {
            this.persons = ko.observableArray(personModels);
        }

        var personModels = [
            new PersonViewModel('Bert'),
            new PersonViewModel('James'),
            new PersonViewModel('Eddy')
        ];

        ko.applyBindings(new ViewModel(personModels));
    })();

和观点：

<div data-bind="foreach: persons">
    <p>
        Name: 
        <b data-bind="visible: !editing(), text: name, click: edit">&nbsp;</b>
        <input data-bind="visible: editing, value: name, hasfocus: editing" />
    </p>
    <p><em>Click the name to edit it; click elsewhere to apply changes.</em></p>
</div>

这是一个 jsfiddle 演示：http: //jsfiddle.net/danne567/gTHpu/