javascript - 从 textInput 字段自动更新 observablearray 当前行中的字段

Question

我有一个绑定(bind)到 View 模型的表。当我选择表格行时，字段(注释)将由此更新:

<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 的内容？

Answer 1

您可以将 td 绑定(bind)到与 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 -->