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

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

本文关键字：函数 Kendo MVVM 绑定 事件 其他 UI 组件      更新时间：2023-09-26

在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作为属性或函数单独存储在我的视图模型中，似乎也同样效率低下。

但当然也有一些情况，比如上面的伪样本，这可能是一厢情愿的。毫无疑问，我看错了方向。因此，如有任何建议或最佳实践，我们将不胜感激。

不幸的是，没有最佳实践，而且也很难自定义。

如果您真的想要它，您可以修改绑定代码，以便它使用属性（在本例中为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);
});

（演示）

相关文章：