Listen to javascript events from Dart

Question

Is there a way in Dart to listen for events from javascript libraries?

For example the jqrangeslider http://ghusse.github.io/jQRangeSlider/ package emits a userValueChanged event when someone releases the slider.

Is it easy to listen for that event in Dart via the js/js.dart package?

Would love to see some examples of a listener in Dart that listens for events like this from a javascript library.

Answer 1

Thanks to js package you can deal with almost all js code. Here is the dart version of the following javascript code snippet :

$("#slider").bind("valuesChanged", function(e, data){
  console.log("Will be executed");
});

In Dart :

js.scoped((){
  js.context.jQuery("#slider").bind("valuesChanged", new js.Callback.many((e, data) {
    print("Will be executed");
  }));
});

Note that I use jQuery instead of $ because you would have issue with dart2js otherwise (see issue 2265).

Basically, when you use callback functions in JS, you have to use js.Callback.many or js.Callback.once to wrap your callback. See Managing callback lifetimes for more details.