0

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

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

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

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

1 回答 1

0

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

<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>

工作示例：剑道模板绑定

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

于 2020-03-03T21:54:44.590 回答