Kendo UI, MVVM을 사용할 때 DOM 요소에서 위젯 객체를 얻는 방법? 이 페이지의 지침에 따라

Question

은 내가 MVVM에 kendo treeView을 만들었습니다 : http://demos.kendoui.com/web/treeview/mvvm.html

지금 나는 events의 일부를 바인딩하고 일부 APIs의 사용을 확인해야합니다.

나는 treeview 객체가 필요하고 어떻게 든 대응하는 DOM 요소를 사용하여 찾을 필요가 있다고 생각한다. 어떻게 달성 될 수 있습니까?

Answer 1

MVVM 바인딩을 사용하여 마크 업에서 이벤트를 바인딩 할 수 있습니다. 이 예제는 어떻게 수행 할 수 있는지 보여줍니다.

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

위의 코드는 MVVM 이벤트 바인딩 구조를 보여줍니다. 이것은 KendoUI MVVM으로 이벤트를 바인드하는 가장 쉬운 방법입니다. 위의 코드를 사용하여 이벤트를 처리하는 onSelect 종속 메소드의 예제도 제공합니다. 쉼표로 구분하여 더 많은 이벤트 바인딩을 추가 할 수 있습니다. 그런 다음 당신은 DOM 요소를 얻을 당신의 자바 스크립트 코드에서 위젯에 전화를 확인하려면 당신의 ViewModel 코드

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

에 온 클릭이라는 방법을 추가 할 필요가

events: { select: onSelect, click: onClick } 

, 당신은 사용할 수 있습니다 :

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

뷰 모델을 페이지에 바인딩 한 후에는 반드시이 작업을 수행하십시오. 또한 예제의 div를 수정하여 jQuery 선택기에서 편리하게 선택할 수 있도록 Id 속성을 포함해야합니다. 위의 코드는 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>