Polymer Dart $[] selector in an autobinding model

Question

Since polymer-body has been removed, we need to use an auto-binded template to use polymer binding features outside of a PolymerElement

Answer 1

I would suggest to use a normal Polymer element instead of auto-binding-dart.
Then you don't have to care about differences and you need no 'main'. I always start a Polymer project with an Polymer element that acts as main() and container for the entire app.

I also would suggest to not use inline code.
As far as I know it has some limitations especially debugging is not supported (might be fixed already, I don't know because I never use it).

To make $ work you need a small and simple workaround;

import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:template_binding/template_binding.dart';


Map $; // we define our own '$'

main() {
  initPolymer().run(() {
    Polymer.onReady.then((_) {
      var template = document.querySelector('template') as Polymer;
      $ = template.$;             // we assign template.$ to our own '$' so we can omit the 'template' part
      templateBind(template).model = new MyModel();
    });
  });
}

class MyModel extends Observable {
  //$['mybutton'] wont work there - it can't because this is outside of a method
  @observable String value = 'something';
  buttonTap() {
    print($['mybutton'].id); // here it works
    print('tap!');
  }
}