更新挖空中可观察数组中项目的属性

Updating properties of an item within an observable array in Knockout

本文关键字：项目 属性 数组 更新 观察      更新时间：2023-09-26

我正在尝试在 Knockout 中实现可观察数组的可更新"选定项"，以便对选定项属性的更改传播回列表。

在下面的示例中，我的模型包含可观察数组中的用户列表，每个用户都有一个可观察的"name"属性。该模型还具有一个 selectedUser 属性，该属性引用列表中的用户。

我有一个绑定到所选用户的name()值的输入控件。我希望能够在输入中更改名称，并看到该更改传播到下面的列表。

.JS： 

var UserModel = function() {
    this.users = ko.observableArray([
                {id:1, name:ko.observable('Bob')},
                {id:2, name:ko.observable('Jane')}
            ]);
    this.selectedUser = ko.observable(this.users()[0]);
    console.log(this.users()[0].name());
}
ko.applyBindings(UserModel);

.HTML：

<input type="text" data-bind="value: selectedUser().name()" value="">
<table data-bind="foreach: users()">
    <tr >
        <td data-bind="text: $data.name()"> </td>
    </tr>
</table>

小提琴：http://jsfiddle.net/5t5k2/5/

你快到了。

唯一的问题是您将输入字段绑定到可观察量的调用，而不是函数本身。

当你做.name()你正在调用可观察量，所以你会得到一个字符串。相反，绑定到可观察量本身。

改变：

<input type="text" data-bind="value: selectedUser().name()" value="">

自

<input type="text" data-bind="value: selectedUser().name" value="">

（ 小提琴 ）

如果你想要那种即时的感觉，你可以告诉它更新在按下键时，而不仅仅是在更改事件上更新（在选项卡上触发或失去焦点时触发）

<input type="text" data-bind="value: selectedUser().name, valueUpdate: 'keyup'" value="">

（ 小提琴 ）

相关文章：