Binding Polymer button to Dart code

Question

After reading about different approaches to bind a buttons on-click (or on-tap) handler to a dart-function I didn't got a single one of them to run. Basically I've got a custom polymer element (with a dialog) containing an input field and a button. The button should open another dialog containing some other elements and having access to the previous inputs.

register-dialog.html

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/paper_input.html">
<link rel="import" href="packages/paper_elements/paper_button.html">
<link rel="import" href="packages/paper_elements/paper_dialog.html">
<link rel="import" href="packages/paper_elements/paper_dialog_transition.html">

<polymer-element name="register-dialog" noscript>
  <template>
   <link rel="stylesheet" href="configurator.css">
    <paper-dialog heading="Willkommen in IP-Symcon" vertical autoCloseDisabled=true transition="paper-transition-center" opened=true>
      <p>{{test}}</p>
      <p><paper-input floatingLabel label="Lizenzname" style="width: 380px; margin: 0 10px"></paper-input></p>
      <p><input type="file" id="licence_upload" name="licence_upload"  style="width: 380px;margin: 0 10px" /></p>
      <paper-button affirmative label="Jetzt Einrichten"
      id="registerButton"
      on-click="register" class="ink" style="right: 10px;bottom: 10px;position: absolute;"></paper-button>
    <content></content>
  </template>
  <script type="application/dart" src="register-dialog.dart"></script>
</polymer-element>

register-dialog.dart

import 'package:polymer/polymer.dart';

void main() {

}

@CustomTag('register-dialog')
class RegisterDialog extends PolymerElement{

  @observable String test = 'Test erfolgreich';

  RegisterDialog.created() : super.created() {

    }

  register(event, detail, target){        
    print ('register (register-dialog.dart)');
  }    
}

The print in "register(event, detail, target)" will never be executed. I tried the paper-buttons on-tap function and varied between different function calls like "register()" and "{{register}}". (By the way my experiment with the observable {{test}} fails as well, my code does not changes anything in the view.

Additional to any help solving my problem it would be helpful if someones could point out some public (dart + polymer) code containing more than one view. I would like to see a good way to switching between those views and passing inserted data between them.

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-07-31T12:01:10

The moustache is missing

on-click="{{register}}"

EDIT

additional information about the question in the comment

I didn't work on an application for several months, only on components.
The last polymer app I worked on I did it manually like:

<app-element>
  <template>
    <template if="{{model.view == 'movie'}}"><my-movie model="{{model.movie}}"></my-movie></template>
    <template if="{{model.view == 'actor'}}"><my-actor model="{{model.actor}}"></my-actor></template>
    ...
  </template>
</app-element>

.

class Model extends Object with Observable {
  @observable String view = 'movie';
  Model() {
    // use hashChanged event and pushState 
    // and set this.view accordingly 
  }
  @observable MovieModel = new MovieModel();
  @observable ActorModel = new ActorModel();
  ...
}

class MovieModel extends Object with Observable {
  @observable String name;
  ...
}

class ActorModel extends Object with Observable {
  @observable String name;
  ...
}

@CustomTag('app-element')
class AppElement extends PolymerElement {
  AppElement.created() : super.created();

  Model model = new Model();
}

I'm interested in trying http://pub.dartlang.org/packages/route_hierarchical but couldn't find time yet.
I also had a discussion very recently with a member of the Dart team about documentation how this package can be used with Polymer.

Binding Polymer button to Dart code

1 Answers

EDIT