在Kendo MVVM中将事件绑定到其他UI组件的功能 [英] Binding event to other UI component's function, in Kendo MVVM

问题描述

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

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

例如，假设我同时具有一个网格和一个按钮.我希望按钮触发网格的AddRow函数.为此，假设我有以下html:

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

});

取消注释并像这样去做会让人闻到气味；它实际上似乎不是可观察到的，而是一个纯粹的DOM绑定事件.

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.

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

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.

推荐答案

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

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

如果确实需要，可以修改绑定代码，以便它使用属性(在这种情况下为k-name)为视图模型上的各个小部件添加属性:

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" />

然后，您可以访问VM中的小部件:

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

(演示)

这篇关于在Kendo MVVM中将事件绑定到其他UI组件的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！