在Knockout中更新可观察数组中项的属性

Question

我正在尝试在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>

FIDDLE: http ://jsfiddle.net/5t5k2/5/

Answer 1

你快到了.

唯一的问题是你将输入字段绑定到observable 的调用而不是函数本身.

当你这样做时,.name()你正在调用observable,所以你得到一个字符串.相反,绑定到observable本身.

更改:

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

(小提琴)