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

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';

Answer 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>

Answer 3

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();
}