jquery - Kendo UI、MVVM使用時にDOM要素からwidgetオブジェクトを取得する方法は?

Question

このページの指示に従って作成しkendo treeViewました: http ://demos.kendoui.c​​om/web/treeview/mvvm.htmlMVVM

ここで、いくつかのイベントをバインドし、いくつかのAPIを利用する必要があります。

ツリービュー オブジェクトが必要になると思います。対応する DOM 要素を使用して何らかの方法でそれを見つける必要があります。それはどのように達成できますか？

Answer 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 を変更して、jQuery セレクターで便利に選択できるように Id 属性を含める必要があります。上記のコードでは、ツリービュー 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>