Редактировать привязку шаблона к HTML Атрибуту Kendo UI - PullRequest
Новая
       12

Редактировать привязку шаблона к HTML Атрибуту Kendo UI

0 голосов
/ 03 марта 2020

Я довольно новичок в Кендо, и, видимо, я глуп, чтобы найти решение. Я хочу создать небольшое веб-приложение с MVVM, в которое встроены редактируемые карты. Обычно я могу связать свой шаблон редактирования с jquery с ViewModel. т.е. вот так: 

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

Но мне интересно, можно ли связать шаблон редактирования непосредственно в html с атрибутом. Как то так. 

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

1 Ответ

0 голосов
/ 04 марта 2020

Не так, вам нужно привязать источник и создать шаблон, который имеет доступ к этому источнику, что-то вроде этого: 

<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

PS. Проверьте разницу между #:# и data-bind="text:", нажав кнопку обновления

...