polymer dart input binding int properties

Question

What is the proper way of binding an input field to an int property on an object (e.g. input box changes and updates int property of an object causing another element who is

Answer 1

You can define a two-way transformer of polymer expression that will convert String to int :

class StringToInt extends Transformer {
  String forward(int i) => '$i';
  int reverse(String s) => int.parse(s);
}

Then you add an attribute asInteger to your PolymerElement (you can alternativelly add the transformer globally as decribed in this other answer).

// calc.dart 
import 'package:polymer/polymer.dart';

@CustomTag('my-calc')
class CalcElement extends PolymerElement {
  @observable int price = 0;
  @observable int qty = 0;

  final asInteger = new StringToInt();

  CalcElement.created() : super.created();
}

And finally use this transformer :