Binding event to other UI component's function, in Kendo MVVM

问题

In Kendo UI, what is the best practice to reference another UI element's (widget) functionality; the MVVM way?

For example, let's say I have both a grid and a button. I want the button to trigger the AddRow function of the grid. For this, let's say I have the following html:

<div id="grid" data-role="grid" />
<div id="button" data-bind="click: foo" />

My viewmodel would look something like:

var viewmodel = kendo.observable({

    foo: function() {
        // how to call the grid's functions here ideally, like for example in:
        // var _grid = $("#grid").data("kendoGrid");
        // _grid.addRow();
    }

});

Uncommenting the lines and doing it like this has a smell to it; it doesn't really seem observable, but a pure DOM bound event.

An alternative, like storing the _grid separately as a property or function in my viewmodel, also seems similarly inefficient.

But there are of course scenarios, like the pseudo sample above illustrates, where this could be wishful. Undoubtedly, I'm looking in the wrong direction here. So, any tips or best practices would be gratefully appreciated.

回答1:

There is no best practice, unfortunately, and it's also hard to customize.

If you really want it, you could modify the binding code so it adds properties for the various widgets on the view model using an attribute (k-name in this case):

function bind(dom, object) {
    object = kendo.observable(object);
    dom = $(dom);

    kendo.originalBind(dom, object);
    traverseChildren(object, dom[0]);
}

function traverseChildren(object, node) {
    var children = node.children;
    for (var idx = 0; idx < children.length; idx++) {
        if (node.nodeType !== 1) continue;

        var widget = kendo.widgetInstance($(children[idx]));
        if (widget && widget.element) {
            var name = $(widget.element).attr("k-name");
            if (name)
                object[name] = widget;
        }

        traverseChildren(object, children[idx]);
    }
}

For each element with a widget, you give it a name to access it with:

<input k-name="picker" data-role="datepicker" />

Then you could access the widget in the VM:

$(document).ready(function () {
    kendo.originalBind = kendo.bind;
    kendo.bind = bind;

    var viewmodel = kendo.observable({
        setToday: function (e) {
            this.picker.value(new Date());
        },
        enable: function (e) {
            this.picker.enable(true);
        },
        disable: function (e) {
            this.picker.enable(false);
        }    
    });

    kendo.bind($("#example"), viewmodel);
});

(demo)

来源：https://stackoverflow.com/questions/28859975/binding-event-to-other-ui-components-function-in-kendo-mvvm

标签

javascript

mvvm

kendo-ui

kendo-mvvm