Pass a callback function to polymer element

Question

I want to pass a function/method reference using template binding. Should this work? What am I doing wrong?

index.dart

@observable
class Model() {
  onSignOutCallback(message) {
    print(message);
  }
}

main() {
  query("#tmpl").xtag.model = new Model(); 
  TemplateElement t = query("#plus-login-tmpl") as TemplateElement;
  t.bindingDelegate = new PolymerExpressions();
}

index.html

... ...

my_component.html

<polymer-element name="my-component" attributes="sign-out-callback">
  <button on-click="{{signOutCallback}}>Sign out</span>
</polymer-element>

my_component.dart

typedef void OnSignOutCallback(message);

@CustomTag("my-component")
class MyComponent extends PolymerElement with ObservableMixin {
  OnSignOutCallback onSignOutCallback;

  @override
  inserted() {
    super.inserted();
    onSignOutCallback("signed out"); // test if value was assigned        
  }
}

Answer 1

I had to change the model as following

class Model() {
  var onSignOutCallback;

  Model(){
    onsignOutCallback = signOutCallback;
  }

  signOutCallback(message) {
    print(message);
  }
}

It seems that it currently is not possible to reference methods directly in HTML as it does inside a Polymer element. Assigning the method to a field in the model and referencing the field in HTML works though.