从textInput字段自动更新observalearray当前行中的字段

Question

我有一个绑定到视图模型的表。当我选择表格行时，一个字段(注释)将从此更新：

<tbody data-bind="foreach: namespace.PersonResults.model">
<tr data-bind="click: $root.selectItem, css: {selected: $root.isSelected($data)}">
<td data-bind="text: Forename"></td>
<td data-bind="text: Surname"></td>
<td data-bind="text: PostCode"></td>
<td data-bind="text: Notes" style="display: none"></td>
</tr>
</tbody>

与表位于同一div中的字段(这是一个单独的文本区域，在选择上面表上的行时应该更新，并在用户选择另一行时更新表)。

<textarea data-bind="textInput: editNotes"></textarea>

viewModel当前正在执行以下操作：

var resultsViewModel = function() {
var self = this;
self.model = ko.observableArray();
self.editNotes = ko.observable();
self.selectItem = function(record) {
self.selectedItem(record);
self.editNotes(record.Notes);
}
self.getData () {
// some ajax stuff to populate the table
}
}

这对于在textarea中显示注释很好，但如果用户更改了textarea的内容，我如何使其变为另一种方式，并填充observableArray中的字段？

Answer 1

您可以将td绑定到与textarea相同的属性。例如：

var resultsViewModel = function() {
var self = this;
self.editNotes = ko.observable('initial value');
}
var vm = { 
selectedResult: ko.observable(null),
results: [new resultsViewModel(), new resultsViewModel()] 
};
vm.selectResult = function(result) { vm.selectedResult(result); };
ko.applyBindings(vm);

.selected { background-color: pink; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table><tbody data-bind="foreach: results">
<tr data-bind="css: { selected: $root.selectedResult() === $data }">
<td data-bind="text: editNotes"></td>
<td><button data-bind="click: $root.selectResult">Select</button></td>
</tr>
</tbody></table>
<!-- ko with: selectedResult -->
<textarea data-bind="textInput: editNotes"></textarea>
<!-- /ko -->

Answer 2

您需要绑定到textarea:的value

<td>
<textArea data-bind="value: $data.Notes"></textArea>
</td>

我在这个小提琴中制作了一个快速简化的演示

编辑后添加：

这里有一个更新的小提琴，更符合你的需求：小提琴