将多个输入绑定到可观察数组中的同一变量（Knockout.JS）

Posted 2023-03-27

【中文标题】将多个输入绑定到可观察数组中的同一变量（Knockout.JS）

【英文标题】：Bind multiple inputs to the same variable in observable array (Knockout.JS)

【发布时间】：2018-09-23 19:56:22

【问题描述】：

我想将多个输入绑定并更改为同一个变量（以便它们始终一起更改为相同的值），但我无法弄清楚这一点。我的代码：

        $(function () 
            var AppVm = function () 
                this.people = ko.observableArray([
                     firstName: 'Bert', lastName: 'Bertington' ,
                     firstName: 'Charles', lastName: 'Charlesforth' ,
                     firstName: 'Denise', lastName: 'Dentiste' 
                ]);
            ;
            vm = new AppVm();
            ko.applyBindings(vm);
        );

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
        <thead>
            <tr><th>First name</th><th>Last name</th></tr>
        </thead>
        <tbody data-bind="foreach: people">
            <tr>
                <td>
                <input type="text" data-bind="textInput: firstName"/>
                </td>
                <td>
                <input type="text" data-bind="textInput: firstName"/>
                </td>
            </tr>
        </tbody>
    </table>

它最初在两个文本输入中加载相同的值，但是当我更改其中一个时，另一个不会更新。如何同时更新它们？

【问题讨论】：

您的属性必须是可观察的，才能通过淘汰赛进行更新。使整个数组可观察并不会使单个属性可观察。 ObservableArrays 只对数组大小的变化做出反应。

我认为是这样的。但是有什么方法可以使整个可观察数组的单个属性可观察？

没有任何内置的方法可以自动执行此操作，但是有一个常用的库可以帮助您，称为 ko.mapping 插件。 knockoutjs.com/documentation/plugins-mapping.html

【参考方案1】：

正如 Jason Spake 在 cmets 中所说：

您的属性必须是可观察的，才能通过淘汰赛进行更新。 使整个数组可观察并不能使个体 可观察的属性。 ObservableArrays 只对 数组大小。

因此，您需要在observableArray 中使用ko.observable() 才能检测到更改：

$(function () 
    var AppVm = function () 
        this.people = ko.observableArray([
             firstName: ko.observable('Bert'), lastName: ko.observable('Bertington') ,
             firstName: ko.observable('Charles'), lastName: ko.observable('Charlesforth') ,
             firstName: ko.observable('Denise'), lastName: ko.observable('Dentiste') 
        ]);
    ;
    vm = new AppVm();
    ko.applyBindings(vm);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <thead>
        <tr><th>First name</th><th>Last name</th></tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr>
            <td>
                <input type="text" data-bind="textInput: firstName"/>
            </td>
            <td>
                <input type="text" data-bind="textInput: firstName"/>
            </td>
        </tr>
    </tbody>
</table>

现在，当您更改左侧输入中的值时，in 将同时更改右侧输入中的值。

【讨论】：

谢谢，这行得通。我想进一步概括一下，我在第二个答案中的***.com/questions/10048553/… 找到了解决方案（作者：Andy Thomas）

@HarshShah 哦，是的，我明白了，这确实使它更容易操作，很好的答案！