2014-08-29 3 views
2

Я пытаюсь получить объект Event в функции слушателя элемента JQuery Ui. Я на самом деле программирования на языке дротика и использовать пакет JS (дротика: JS) Вот пример:Событие JQuery UI в dart

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? JsOjbect не реально помочь мне ... Ty

+0

Я просто исследую, чтобы реакция нормального слушателя событий. Я привык получать объект Event в прослушивателе функций и работать с ним. В вашем ответе мой отладчик никогда не переходит в строку «var event ..». Слушатель, кажется, не инициализируется только с помощью querySelector. Я буду использовать элемент пользовательского интерфейса JQuery и работать с ним в дротике. – baik

+0

Можете ли вы предоставить ссылку на документ API jquery-ui, который вы используете? Если это http://api.jqueryui.com/slider/, он не запускает событие «slidechange». возможно, вы хотите прослушать событие «change». –

+0

Я только что попробовал ваш код и вызывается '_onSliderChange', когда я перемещаю ручку. –

ответ

2

Если я правильно понимаю, вы не можете получить само событие, но только версию Js о событии Jquery (не родное событие дома), так что вам нужно знать, как это выглядит следующим образом свойство, которое вы хотите согласно документу в 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 
} 

, который должен показывать, как вы переместите ползунок, что-то вроде

div (:1) 
5 (:1) 

Как вы сказали, что иногда трудно иметь дело/де ошибка JSObject поэтому я написал несколько помощников, чтобы преобразовать такой объект в коллекции дротика (список или карта) для отладки цели здесь 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)); 
} 

, который должен показывать такие вещи, как

[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) 

где можно скорее найти недвижимость вы хотите от события

+0

Отлично! Так просто ! Я как можно скорее попробую помощника по объектам. Спасибо за вашу помощь и Гюнтер Цохбауэр, спасибо вам тоже. – baik