polymer dart input binding int properties

1
votes

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 binding to the same property to update)

Example code is below; I may be thinking the wrong way going this route but need some clarification.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <link rel="import" href="components/calc.html">
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
</head>
<body>
  <my-calc></my-calc>
</body>
</html>

<!-- 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='{{ price * 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 int price = 0;
  @observable int qty = 0;

  CalcElement.created() : super.created();
}
3
dartdart-polymerpolymer

3 Answers

5
votes

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>
2
votes

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

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