Call method/event from html in dart

Question

I am working with dart and have something like this in my html file:

<button doStuff="alert('test')"></button>

And I want to do something like dart:

myButton.doStuff();

How would I do this. The code must be with HTML Tag, preferably . I do not want to create any custom or third party UI elements like polymer.

Thanks :)

edit:

The problem has changed, sorry, this is how I want to do:

//javascript code in the head of html
var htmlTag = getElementById('htmlTag');
htmlTag.doStuff(function() { 
   alert('test');
});

<!-- HTML code/ doStuff method not mentioned in the tag anymore  -->
<h1 id="htmlTag">

//dart code to call method doStuff
querySelector('#htmlTag')..doStuff();

How can I call doStuff() method from dart with the given element button1. Thanks

edit 2: I changed the html tag, because the button confused some people

This doesn't make more sense. Can you please explain what you actually try to accomplish? I assumed you want to execute code when someone clicks the button. Is that not what you want? In this case you have to listen to the click event and pass a callback that gets executed when the click event occurs. To make your getElementById('button1') to work you should add the id to the button <button id='button1'>text</button> — Günter Zöchbauer
– Günter Zöchbauer, Commented May 22, 2014 at 9:16
No I do not want to check the click event. I want any html tag, it could also be a <h1> to have an callback method like doStuff, and this is implemented in the header of the html file shown in my edited question. this doStuff should be called from dart, no clicking, no draggin no mouse... only call method when I want to :) So there must be a nice dart code like this htmlTagName.doStuff(). I hope it's clearer now. thanks — Kronos
– Kronos, Commented May 22, 2014 at 9:21
This still doesn't make sense to me and no, this doesn't work in Dart because Dart has no eval and therefore can't execute arbitrary strings as code. It would help a lot if you could explain what purpose this construct should fulfill. — Günter Zöchbauer
– Günter Zöchbauer, Commented May 22, 2014 at 9:49
I agree with Günter here. This does not make sense. Running a function within an interval can be done with the async's Timer class from dart. Instead of calling doStuff you could run a method that gets the button as a parameter. Same story, much prettier. — Robert
– Robert, Commented May 22, 2014 at 12:15

Günter Zöchbauer · Accepted Answer · 2014-05-22 08:54:13Z

1

This doesn't work in plain Dart/HTML. Polymer and Angular provide support for such bindings (probably also many other frameworks).

You can add the binding in code like:

querySelector('button').onClick.listen((e) => doStuff());

answered May 22, 2014 at 8:54

Günter Zöchbauer

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

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

4 Comments

Robert Over a year ago

But this does not execute the specific code for that element, right? doStuff() has to be a function somewhere specified in dart.

Günter Zöchbauer Over a year ago

What element? This is plain Dart ;-) The question doesn't contain anything about Polymer so I tried to show a solution that works without.

Robert Over a year ago

He has a button element. And the button element has an attribute called "doStuff" that contains code. And we wants to execute this code. Your code does execute a function and not the code in the attribute. This does not make sense in general but your answer does not answer his question.

Günter Zöchbauer Over a year ago

I see what you mean but your interpretation doesn't make more sense to like my own ;-) But I see why you added your comment to the question.

Justin Fagnani · Accepted Answer · 2014-05-22 17:28:15Z

1

It sounds like you really want to create a custom element with a doStuff method. Try this:

@CustomTag('my-button')
class MyButton extends ButtonElement with Polymer {
  MyButton.created() : super.created();

  doStuff() => alert('test');
}

<my-button id="htmlTag"></my-button>

@initMethod
main() {
  querySelector('#htmlTag').doStuff();
}

answered May 22, 2014 at 17:28

Justin Fagnani

11.3k3 gold badges30 silver badges41 bronze badges

Collectives™ on Stack Overflow

Call method/event from html in dart

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related