2014-08-29 4 views
2

Jquery UI 요소의 리스너 함수에서 Event 객체를 가져 오려고합니다. 가 실제로 다트 언어로 프로그래밍과 JS 패키지 (다트 : JS)를 사용하고 있습니다 :다트의 이벤트 Jquery UI

Example.html :

<script async type="application/dart" src="Example.dart"></script> 
<script async src="packages/browser/dart.js"></script> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 

<div id="container"> 
    <canvas id="stage" width="500px" height="500px"></canvas> 
</div> 
<div id="menu"> 
    <button id="btnImport">Button Import</button> 
    <div id="slider-1"></div> 
</div> 

Example.dart :

import 'dart:html'; 
import 'dart:js' as js; 

void main() { 
    js.JsObject slider_1 = js.context.callMethod("\$", ['#slider-1']); 
    slider_1.callMethod('slider'); 
    slider_1.callMethod("on",["slidechange",_onSliderChange]); 
} 

void _onSliderChange(js.JsObject obj1,js.JsObject obj2) { 

} 
다음 하는 예입니다

_onSliderChange 함수에서 slidechange 이벤트의 Event Object를 검색하는 방법은 무엇입니까? JsOjbect가 도움이되지 않습니다 ... Ty

+0

저는 normaly 이벤트 리스너의 반응을 연구했습니다. function listener에서 Event 객체를 수신하고 함께 작업하는 데 사용됩니다. 당신의 대답에, 제 디버거는 "var event .."라인에 절대 가지 않습니다. 리스너는 querySelector로 초기화되지 않는 것 같습니다. Jquery UI 요소를 사용하여 다트에서 사용할 것입니다. – baik

+0

사용중인 jquery-ui 요소 API 문서에 대한 링크를 제공 할 수 있습니까? 이것이 http://api.jqueryui.com/slider/ 인 경우'slidechange' 이벤트를 발생시키지 않습니다. 어쩌면 당신은 대신'change' 이벤트를 듣고 싶을 것입니다. –

+0

방금 ​​코드를 시도했으며 노브를 움직이면'_onSliderChange'가 호출되었습니다. –

답변

2

정확하게 이해하면 js 이벤트 (기본 DOM 이벤트가 아님)의 js 버전이므로 이벤트 자체를 가져올 수 없습니다. 당신이 말했듯이

div (:1) 
5 (:1) 

같은 슬라이더를 이동, 뭔가 표시해야하는 http://api.jqueryui.com/slider/#event-change

void _onSliderChange(js.JsObject obj1, js.JsObject obj2) { 
    print(obj1['target']); // <= get the div 
    print(obj2['value']); // <= get the value 
} 

에 당신이 문서에 따라 원하는 속성을 읽을처럼 보이는이 처리하기 어려운 때때로/de 버그의 JSObject는 그래서 당신은 가능성이 속성을 찾을 수있는

[originalEvent, type, isDefaultPrevented, timeStamp, jQuery110207535289276856929, target, toElement, screenY, screenX, pageY, pageX, offsetY, offsetX, fromElement, clientY, clientX, buttons, button, which, view, shiftKey, relatedTarget, metaKey, eventPhase, currentTarget, ctrlKey, cancelable, bubbles, altKey, delegateTarget, handleObj, data, isTrigger, namespace, namespace_re, result] (:1) 
{originalEvent: {originalEvent: Instance of 'MouseEvent', type: mouseup, isDefaultPrevented: {}, timeStamp: 1409328507659, jQuery110207535289276856929: true, toElement: span, screenY: 624, screenX: 115, pageY: 545, pageX: 110, offsetY: 16, offsetX: 15, fromElement: null, clientY: 545, clientX: 110, buttons: null, button: 0, which: 1, view: <window>, target: span, shiftKey: false, relatedTarget: null, metaKey: false, eventPhase: 3, currentTarget: Instance of 'HtmlDocument', ctrlKey: false, cancelable: true, bubbles: true, altKey: false, delegateTarget: Instance of 'HtmlDocument', handleObj: {type: mouseup, origType: mouseup, data: null, handler: {guid: 23}, guid: 23, selector: null, needsContext: null, namespace: slider}, data: null}, type: slidechange, isDefaultPrevented: {}, timeStamp: 1409328507659, jQuery110207535289276856929: true, target: div, toElement: span, screenY: 624, screenX: 115, pageY: 545, pageX: 110, offsetY: 16, offsetX: 15, fromElement: null, clientY: 545, clientX: 110, buttons: null, button: 0, which: 1, view: <window>, shiftKey: false, relatedTarget: null, metaKey: false, eventPhase: 3, currentTarget: div, ctrlKey: false, cancelable: true, bubbles: true, altKey: false, delegateTarget: div, handleObj: {type: slidechange, origType: slidechange, data: null, handler: {guid: 17}, guid: 17, selector: null, needsContext: null, namespace: }, data: null, isTrigger: 3, namespace: , namespace_re: null, result: null} (:1) 

같은 물건을 표시해야하는 여기 https://github.com/alextekartik/tekartik_utils.dart/blob/master/lib/src/js_utils/jsobject_converter.dart

void _onSliderChange(js.JsObject obj1,js.JsObject obj2) { 
    print(jsObjectKeys(obj1)); 
    print(jsObjectAsCollection(obj1)); 
} 

을 목적으로 디버깅을 위해 다트 모음 (목록 또는 맵)에 같은 개체를 변환하는 몇 가지 헬퍼를 썼다 당신은 이벤트에서 원합니다.

+0

완벽! 너무 간단! 가능한 한 빨리 도우미를 시험해 보겠습니다. 도움을 주신 Günter Zöchbauer에게 감사드립니다. 감사합니다. – baik