在 Kendo MVVM 中将事件绑定到其他 UI 组件的功能

Question

在 Kendo UI 中，引用另一个 UI 元素（小部件）功能的最佳实践是什么？ MVVM 方式？

例如，假设我有一个网格和一个按钮。我希望按钮触发网格的 AddRow 功能。为此，假设我有以下 html：

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

我的视图模型看起来像：

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();
    }

});

取消注释行并像这样这样做有味道；它看起来并不真正可观察，而是一个纯 DOM 绑定事件。

另一种方法，例如将 _grid 作为属性或函数单独存储在我的视图模型中，似乎也同样低效。

但当然也有一些场景，如上面的伪示例所示，这可能是一厢情愿的。毫无疑问，我在这里看错了方向。因此，我们将不胜感激任何提示或最佳做法。

Answer 1

很遗憾，没有最佳实践，而且也很难定制。

如果你真的想要它，你可以修改绑定代码，以便它使用属性（在本例中为k-name）为视图模型上的各种小部件添加属性：

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]);
    }
}

对于每个带有小部件的元素，您可以为其命名以访问它：

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

然后你可以访问虚拟机中的小部件：

$(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)