Question

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

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

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

我的viewmodel看起来像：

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分别作为属性或函数存储在我的viewmodel中，也似乎效率低下。

但是当然有一些场景，比如上面的伪示例所示，这可能是如意的。毫无疑问，我在这里看错了方向。因此，我们将非常感谢任何提示或最佳实践。

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

然后您可以访问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);
});

（demo）

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

1 个答案: