Kendo UI，使用 MVVM 时如何从 DOM 元素获取小部件对象？答案

【问题标题】：Kendo UI, How to get widget object from DOM element when using MVVM?Kendo UI，使用 MVVM 时如何从 DOM 元素获取小部件对象？
【发布时间】：2013-08-30 18:37:26
【问题描述】：

我已按照此页面中的说明在MVVM 中创建了kendo treeView：http://demos.kendoui.com/web/treeview/mvvm.html

现在我需要绑定一些events，还要使用一些APIs。

我想我需要拥有 treeview 对象，并且我需要使用相应的 DOM 元素以某种方式找到它。怎么可能做到这一点？

【问题讨论】：

标签： jquery mvvm kendo-ui kendo-treeview kendo-mvvm

【解决方案1】：

您可以使用 MVVM 绑定在标记中绑定事件。该示例显示了如何做到这一点。

data-bind="visible: isVisible, source: files, events: { select: onSelect }

示例中的代码显示了 MVVM 事件绑定结构。这是使用 KendoUI MVVM 绑定事件的最简单方法。使用上面的代码，他们还给出了处理事件的 onSelect 依赖方法的示例。您可以通过用逗号分隔来添加更多事件绑定。

events: { select: onSelect, click: onClick }

然后您需要在视图模型代码中添加一个名为 onClick 的方法

onClick: function(e) {
//Do Something
}

如果您想获取 DOM 元素并从您的 Javascript 代码中调用小部件，您可以使用：

var treeViewWidget = $("#treeview").data("kendoTreeView");

确保在将视图模型绑定到页面后执行此操作。您还需要修改示例中的 div 以包含 Id 属性，以便在 jQuery 选择器中进行选择。上面的代码需要你定义你的 treeview div 为：

<div id="treeview" class="files"
data-role="treeview"
data-drag-and-drop="true"
data-text-field="name"
data-spritecssclass-field="type"
data-bind="visible: isVisible,
source: files,
events: { select: onSelect }"></div>

【讨论】：