jquery - kendo-ui 将可观察的内容绑定(bind)到可编辑的内容

Question

我遇到了一种一次性情况，我没有使用 kendoGrid 来显示我的数据。相反，我在普通的 HTML 表中显示数据，其中行和列是静态的。在本例中，我将表绑定(bind)到 viewModel 并设置 <td>元素为contenteditable :

 <table class="table table-bordered">
    <thead>
        <tr>
            <th scope="col">&nbsp;</th>
            <th scope="col">Federal</th>
            <th scope="col">State</th>
            <th scope="col">Local</th>
            <th scope="col">NG</th>
            <th scope="col">Other</th>
            <th scope="col">Total Projected</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="col">Full Time</th>
            <td contenteditable="true" data-bind="text: viewModel.FederalFullTime"></td>
            <td contenteditable="true" data-bind="text: viewModel.StateFullTime"></td>
            <td contenteditable="true" data-bind="text: viewModel.LocalFullTime"></td>
            <td contenteditable="true" data-bind="text: viewModel.NonGovernmentFullTime"></td>
            <td contenteditable="true" data-bind="text: viewModel.OtherFullTime"></td>
            <td data-bind="text: viewModel.TotalFullTime"></td>
        </tr>
        <tr>
            <th scope="col">Part Time</th>
            <td contenteditable="true" data-bind="text: viewModel.FederalPartTime"></td>
            <td contenteditable="true" data-bind="text: viewModel.StatePartTime"></td>
            <td contenteditable="true" data-bind="text: viewModel.LocalPartTime"></td>
            <td contenteditable="true" data-bind="text: viewModel.NonGovernmentPartTime"></td>
            <td contenteditable="true" data-bind="text: viewModel.OtherPartTime"></td>
            <td data-bind="text: viewModel.TotalPartTime"></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="col">Totals</th>
            <td data-bind="text: viewModel.TotalFederal"></td>
            <td data-bind="text: viewModel.TotalState"></td>
            <td data-bind="text: viewModel.TotalLocal"></td>
            <td data-bind="text: viewModel.TotalNonGovernment"></td>
            <td data-bind="text: viewModel.TotalOther"></td>
            <td data-bind="text: viewModel.Total"></td>
        </tr>
    </tfoot>
</table>

每当初始化保存表格的模板时，它都会根据各自的绑定(bind)正确显示单元格中的数据。但是，如果我更改 <td> 的文本，它不会更新 View 模型中的值。使用contenteditable特征。我通过绑定(bind) View 模型的更改事件(并且它从不触发)以及通过控制台检查内联来确认这些值没有更新:

_viewModel.authorizationInterface.viewModel.bind("change", function (e) {
    console.log(e); // Not firing when cell is edited
})

当我使用contenteditable编辑单元格的文本时，有没有办法强制更新 View 模型？

Answer 1

您正在使用text binding ，我认为这是单向的。双向等效为 value ，它依赖于 DOM change event ，contenteditable 元素没有。

我认为你可以用custom binding来做到这一点。在 init 中，订阅 this.element input event并在那里触发更改方法。