Numeric for loop in Dart Polymer templates - dart

Question

How do I write a numeric for loop in a polymer custom element template? I mean something like
<template repeat="{{for i = 1 to 10}}">
<div>item</td>
</template>
Is it possible in the current version of Dart 1.0?

Answer 1

Currently no, this is not possible in Polymer.dart (or Polymer.js to my knowledge). The repeat binding requires an iterable (See Repeating Templates section of the Polymer_expressions library). Unfortunately due to Issue 12669 it is also not possible to use a list literal to accomplish this either.
Using a filter we can accomplish this:
<!-- myelement.html -->
<polymer-element name="my-element">
<template>
<div>
<template repeat="{{ 5 | myFilter }}">
<p>Write me {{ }}</p>
</template>
</div>
</template>
<script type="application/dart" src="myelement.dart"></script>
</polymer-element>
// myelement.dart
import 'package:polymer/polymer.dart';
import 'package:polymer_expressions/filter.dart';
#CustomTag('my-element')
class MyElement extends PolymerElement {
final Transformer myFilter = new GenerateIterable();
MyElement.created() : super.created();
}
class GenerateIterable extends Transformer<Iterable, int> {
int reverse(Iterable i) => i.length;
Iterable forward(int i) => new Iterable.generate(i, (j) => j + 1);
}
Creating a page which imports myelement.html and using <my-element></my-element> will output:
<div>
<p>Write me 1</p>
<p>Write me 2</p>
<p>Write me 3</p>
<p>Write me 4</p>
<p>Write me 5</p>
</div>