结合事件的其他UI组件的功能，在剑道MVVM(Binding event to other UI c

在剑道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如在我的视图模型的属性或功能，也似乎同样低效的。

但当然有场景中，像上面的伪样品示出，其中，这可能是如意。毫无疑问，我在这里找错了方向。因此，任何技巧或最佳做法将感激地赞赏。

没有最好的做法，不幸的是，它也很难进行定制。

如果你真的想要它，你可以因此增加属性（使用属性视图模型的各个部件修改绑定代码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);
});

（演示）