Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

正如Jason Spake在评论中所说：

您的属性必须是可观察的才能使用淘汰赛进行更新。使整个阵列可观察并不能成为个体物业可观察。 ObservableArrays只对变化做出反应数组大小。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

1 个答案: