Passing Dart objects to js functions in js interop

Question

I've been playing around a bit with the new js interop of dart. So far everything was very straight-forward. But one thing I'm not sure about is how to deal with js stuff like this:

MathJax.Hub.Config({
  showProcessingMessages: false,
  showMathMenu: false
  .. many other different options
});

I can translate the MathJax.Hub.Config part:

@JS('MathJax') external MathJaxClass get MathJax;
class MathJaxClass {
  external HubClass get Hub;
}

@JS('MathJax.Hub')
class HubClass {
  external void Config(options);
}

But now I would like to have the options argument of Config function to be a Dart Object. I'm not sure how to do this. The only way, I can get something working is with a Map:

  MathJax.Hub.Config(new JsObject.jsify({
    'showProcessingMessages': false,
    'showMathMenu': false
  }));

But this is surely not ideal. Any ideas?

What argument(s) does the JS function Hub.Config() expect? — Günter Zöchbauer
– Günter Zöchbauer, Commented Oct 28, 2015 at 15:39
@GünterZöchbauer One argument. Just a regular Javascript object with only data. Every key is just a string. — Kasper
– Kasper, Commented Oct 28, 2015 at 15:42

Kasper · Accepted Answer · 2015-11-22 13:32:33Z

4

The syntax is as follows:

@anonymous
@JS()
class Config {
  external bool get showProcessingMessages;
  external bool get showMathMenu;

  external factory Config({bool showProcessingMessages, bool showMathMenu});
}

Here the Config name is not matching any javascript name, so you can name it whatever you want. You can then call it like this:

MathJax.Hub.Config(new Config(
  showProcessingMessages: false,
  showMathMenu: false
));

The object passed to the js function, will be a regular javascript object:

edited Nov 22, 2015 at 13:32

answered Oct 28, 2015 at 17:33

Kasper

13.9k15 gold badges46 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Günter Zöchbauer · Accepted Answer · 2015-11-08 13:11:40Z

2

Since a recent update the @anonymous annotation is used to create JS objects from Dart classes instead of a factory constructor.

@JS()
@anonymous
class Config {
  external bool get showProcessingMessages;
  external set showProcessingMessages(bool value);
  external bool get showMathMenu;
  external set showMathMenu(bool value);
}

MathJax.Hub.Config(new Config()
  ..showProcessingMessages= false
  ..showMathMenu = false
}));

edited Nov 8, 2015 at 13:11

answered Oct 28, 2015 at 15:45

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Collectives™ on Stack Overflow

Passing Dart objects to js functions in js interop

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related