我正在尝试在 Knockout 中实现可观察数组的可更新“选定项”,以便将选定项属性的更改传播回列表。
在下面的示例中,我的模型在可观察数组中包含用户列表,每个用户都有一个可观察的“名称”属性。该模型还有一个 selectedUser
属性,它引用列表中的用户。
我有一个输入控件绑定(bind)到所选用户的 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/
最佳答案
你几乎就到了。
唯一的问题是您将输入字段绑定(bind)到可观察对象的调用,而不是函数本身。
当您执行 .name()
时,您将调用可观察对象,以便返回一个字符串。相反,绑定(bind)到可观察本身。
更改:
<input type="text" data-bind="value: selectedUser().name()" value="">
至
<input type="text" data-bind="value: selectedUser().name" value="">
( fiddle )
如果您想要那种即时的感觉,您可以告诉它在按下按键时更新,而不仅仅是在更改事件(在选项卡上或当您失去焦点时触发)上更新
<input type="text" data-bind="value: selectedUser().name, valueUpdate: 'keyup'" value="">
( fiddle )
关于javascript - 在 Knockout 中更新可观察数组中项目的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20646322/