kendo-ui 将 observable 绑定到 content editable

Question

我有一个一次性的情况，我没有使用 kendoGrid 来显示我的数据。相反，我在正常的 HTML table 中显示我的数据，其中行和列是静态的。在这种情况下，我将 table 绑定到 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>

每当初始化包含 table 的模板时，它都会根据各自的绑定正确显示单元格中的数据。但是，如果我使用 contenteditable 功能更改 <td> 的文本，它不会更新视图模型中的值。我通过绑定我的视图模型的更改事件（并且它从不触发）以及通过控制台检查内联来确认这些值没有更新：

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

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

Answer 1

您正在使用 text binding, which I believe is one-way. The two-way equivalent is value, which relies on the DOM change event，contenteditable 元素没有。

我认为您可以使用 custom binding. In init, subscribe to this.element input event 并在那里触发更改方法。

kendo-ui 将 observable 绑定到 content editable

kendo-ui bind observable to content editable

jquery

kendo-ui