在 HTML 属性 Kendo UI 上编辑模板绑定答案

【问题标题】：Edit Template bind on HTML Attribute Kendo UI在 HTML 属性 Kendo UI 上编辑模板绑定
【发布时间】：2020-03-03 14:16:40
【问题描述】：

我对剑道很陌生，显然我很愚蠢地找到了解决方案。我想用内置可编辑卡片的 MVVM 构建一个小 Webapp。通常我可以将我的编辑模板与 jQuery 绑定到 ViewModel。即像这样：

editTemplate: kendo.template($('#cardEditTemplate').html())

但我想知道是否可以将编辑模板直接在 html 中绑定到属性。像这样的：

<div id="board-#: Id #" class="board" data-template="listTemplate" data-bind="source:ListViewModels "></div>

【问题讨论】：

标签： jquery html mvvm kendo-ui

【解决方案1】：

不是这样，您需要绑定源并制作可以访问该源的模板，如下所示：

<div id="users">
    <div data-bind="source: users" data-template="users-template"></div>

    <script type="text/x-kendo-template" id="users-template">
        <div>
            <span>#: username #</span> ||<span data-bind="text: username"></span><br>
            <span>#: age #</span> ||<span data-bind="text: age"></span>

        </div>
    </script>

    <button class="k-button" data-bind="click: updateName">Update first name</button>
    <button class="k-button" data-bind="click: updateAge">Update first name</button>
</div>

<script>
    $(document).ready(function () {
        var obs = function () {
            return kendo.observable({
                users: [{id: 1, username: 'Jon', age: 32}, {id: 2, username: 'Jake', age: 22}],
                updateName: function () {
                    this.users[0].set('username', 'updated name');
                },
                updateAge: function () {
                    this.users[1].set('age', '100');
                }
            });

        };

        let viewModel = obs();
        kendo.bind($('#users'), viewModel);
    });
</script>

工作示例：Kendo template binding

PS。通过单击更新按钮检查#:# 和data-bind="text:" 之间的区别

【讨论】：

谢谢。这不完全是我想要的，但你给了我一个想法。