jquery - Kendo-UI buttonsTemplate MVVM Binding

Question

I have a an external Kendo-UI template that looks like this:

<script id="view-example-upsert-buttons" type="text/x-kendo-template">
    <button class="k-button k-primary" type="button" data-bind="invisible: editing, click: edit">Edit</button>
    <button class="k-button k-primary k-form-submit" type="submit" data-bind="visible: editing">Submit</button>
    <button class="k-button k-form-clear" data-bind="visible: editing">Cancel</button>
    <button class="k-button" type="button" data-bind="visible: editing, click: delete">Delete</button>
    <button class="k-button" type="button" data-bind="visible: editing, click: undelete">Undelete</button>
</script>

And I am initializing my form like this:

var observableExampleUpdate = kendo.observable({
    editing: false,
    form: null,
    id: null,
    model: null,

    delete: function () {
        console.log('delete');
    },
    edit: function () {
        observableExampleUpdate.set('editing', true);
    },
    undelete: function () {
        console.log('undelete');
    },

    init: function () {
        $('#example-form-upsert').kendoForm({
            buttonsTemplate: kendo.template($('#view-example-upsert-buttons').html()),
            formData: {
                ExampleName: ''
            },
            items: [
                {
                    field: 'ExampleName',
                    label: 'Example Name',
                    validation: { required: true }
                }
            ],
            layout: "grid",
            grid: {
                cols: 2,
                gutter: 20
            },
            clear: function (e) {
                e.preventDefault();
                observableExampleUpdate.set('editing', false);
                observableExampleUpdate.form.setOptions({
                    formData: observableExampleUpdate.model
                });
            },
            submit: function (e) {
                e.preventDefault();
            }
        });
    },
    show: function () {
        var form = $('#example-form-upsert').getKendoForm();
        form.clear();
        if (dataSourceExample.hasChanges()) {
            dataSourceExample.cancelChanges();
        }
        observableExampleUpdate.set('editing', false);
        dataSourceExample.read({ ExampleId: observableExampleUpdate.id }).done(function () {
            var view = dataSourceExample.view();
            if (view.length === 0) {
                routerExample.navigate('#/');
                return;
            }
            if (view.length > 1) {
                routerExample.navigate('#/');
                return;
            }
            observableExampleUpdate.set('model', view[0]);

            var form = $('#example-form-upsert').getKendoForm();
            form.setOptions({
                formData: observableExampleUpdate.model
            });
        });
    }
});

But it doesn't look as if the data-bindings are actually being applied to the buttons.

First off, only the "edit" button is visible, regardless of if my editing property is set to true. Secondly, when I try to click on the "edit" button, I get the following error in the console:

Uncaught TypeError: ((b.event.special[i.origType] || {}).handle || i.handler).apply is not a function

So my question is: how do I apply MVVM bindings to a form's buttonsTemplate?

question from:https://stackoverflow.com/questions/65839048/kendo-ui-buttonstemplate-mvvm-binding

Answer 1

Waitting for answers