Knockout.js中如何将多个输入框绑定到可观察数组的同一变量？

嘿，我来帮你搞定这个Knockout.js的联动问题～你现在的代码没实现联动，核心问题是没有使用Knockout的可观察对象（observable）来定义需要同步的变量，普通字符串值没办法让Knockout追踪变化并同步更新。

下面分两种常见场景给你解决方案：

场景1：多个独立输入框绑定同一个共享变量 #

如果是想让几个不关联的输入框始终显示相同内容，修改任意一个其他都同步，你只需要定义一个全局的observable变量，然后所有输入框都绑定它就行：

HTML 代码 #

<!-- 三个输入框都绑定到同一个sharedValue -->
<input type="text" placeholder="输入内容同步所有框" data-bind="value: sharedValue" />
<input type="text" placeholder="我也会同步" data-bind="value: sharedValue" />
<input type="text" placeholder="我也是" data-bind="value: sharedValue" />

JavaScript 代码 #

$(function () {
    var AppVm = function () {
        // 关键：用ko.observable定义共享变量，Knockout会自动追踪变化
        this.sharedValue = ko.observable("初始同步值");
        
        // 你原来的people数组可以保留，不影响
        this.people = ko.observableArray([
            { firstName: 'Bert', lastName: 'Bertington' },
            { firstName: 'Charles', lastName: 'Charlesforth' },
            { firstName: 'Denise', lastName: 'Dentiste' }
        ]);
    };
    vm = new AppVm();
    ko.applyBindings(vm);
});

场景2：数组中多个项的同一属性同步联动 #

如果是想让people数组里所有人的firstName始终保持一致，修改任意一个人的firstName，其他人的也跟着变，那需要让所有项的firstName指向同一个observable：

HTML 代码 #

<!-- 遍历people数组，每个项的输入框绑定到item.firstName -->
<div data-bind="foreach: people">
    <div>
        <input type="text" data-bind="value: firstName" />
        <span> - <span data-bind="text: lastName"></span></span>
    </div>
</div>

JavaScript 代码 #

$(function () {
    var AppVm = function () {
        // 创建一个共享的可观察变量，用于所有项的firstName
        this.sharedFirstName = ko.observable("Bert");
        
        this.people = ko.observableArray([
            // 每个项的firstName都指向同一个sharedFirstName
            { firstName: this.sharedFirstName, lastName: 'Bertington' },
            { firstName: this.sharedFirstName, lastName: 'Charlesforth' },
            { firstName: this.sharedFirstName, lastName: 'Dentiste' }
        ]);
    };
    vm = new AppVm();
    ko.applyBindings(vm);
});

为什么原来的代码不行？ #

你原来的people数组里的firstName和lastName都是普通的字符串值，不是Knockout的observable对象。Knockout的响应式依赖是建立在observable之上的，只有当变量是observable时，Knockout才能监听它的变化，自动更新所有绑定的UI元素。

内容的提问来源于stack exchange，提问作者Harsh Shah