编辑HTML属性Kendo UI上的模板绑定

Question

我对剑道非常陌生，显然我很愚蠢，无法找到解决方案。我想用MVVM构建一个lil Webapp，其中内置了可编辑卡。通常，我能够将带有jquery的编辑模板绑定到ViewModel。即像这样：

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

但是我想知道是否有可能直接将html中的编辑模板绑定到属性。像这样的东西。

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

Answer 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:"之间的差异