Search code examples
dartdart-polymerpaper-elements

Binding to a paper-toggle-button

I have the following declaration in a .html file:

          <paper-toggle-button
            id = 'tglBtn'
            on-change = '{{ address.sameAddress }}'
            on-mouseout = '{{ onChangeToggleBtnHandler }}'>
          </paper-toggle-button>

class Address extends Observable
{
  @observable
  bool sameAddress = false;
}

On executing the app gives the following stack trace:

Exception: Uncaught Error: type 'bool' is not a subtype of type 'Function' of 'f'.
Stack Trace:
#0      minArgs (package:smoke/src/common.dart:53:22)
#1      GeneratedObjectAccessorService.invoke (package:smoke/static.dart:131:24)
#2      invoke (package:smoke/smoke.dart:43:41)
#3      HtmlElement&Polymer.dispatchMethod (package:polymer/src/instance.dart:1054:19)
#4      BindingDelegate&PolymerEventBindings.getEventHandler.<anonymous closure> (package:polymer/src/events.dart:82:32)
#5      _RootZone.runUnaryGuarded (dart:async/zone.dart:1020)
#6      _RootZone.bindUnaryCallback.<anonymous closure> (dart:async/zone.dart:1049)
#7      BindingDelegate&PolymerEventBindings.prepareEventBinding.<anonymous closure>.<anonymou

It would seem that access is via some form of javascript.

s closure> (package:polymer/src/events.dart:101:67)

Solution

  • on-Change is an event. You can only bind an event handler to it, not an attribute.