在 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)

在 Kendo MVVM 中将事件绑定到其他 UI 组件的函数

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

javascript

mvvm

kendo-ui

kendo-mvvm