polymer dart input binding int properties

Question 1

You're on the right track here. The only problem is that the value attribute of the input element is a string. One way to do it is like this:

<!-- calc.html -->
<polymer-element name="my-calc">
  <template>
    <label>Price</label>
    <input value='{{ price }}'>

    <label>Qty</label>
    <input value='{{ qty }}'>

    <label>Total</label>
    <input value='{{ int.parse(price) * int.parse(qty) }}'>

  </template>
  <script type="application/dart" src="calc.dart"></script>
</polymer-element>

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

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

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

Question 2

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

class StringToInt extends Transformer<String, int> {
  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 :

<!-- calc.html -->
<polymer-element name="my-calc">
  <template>
    <label>Price</label>
    <input value='{{ price | asInteger }}'>

    <label>Qty</label>
    <input value='{{ qty | asInteger }}'>

    ....

  </template>
  <script type="application/dart" src="calc.dart"></script>
</polymer-element>

Question 3

I think the answer above is the right way, but I am using this instead of the Transformer:

class MyPolymerExpressions extends PolymerExpressions {
  MyPolymerExpressions(): super(globals: {
      'intToString': (int input) => '$input',
  });

  @override
  prepareBinding(String path, name, node) => Polymer.prepareBinding(path, name, node, super.prepareBinding);
}

and add this line in de calc.dart :

@override PolymerExpressions syntax = new MyPolymerExpressions();

Note: in order to use PolymerExpressions, you need:

import 'package:polymer_expressions/polymer_expressions.dart';