dart - Dart Polymer 模板中的数字 for 循环

Question

如何在 polymer 自定义元素模板中编写数字 for 循环？我的意思是像

<template repeat="{{for i = 1 to 10}}">
<div>item</td>
</template>

现在的Dart 1.0版本可以吗？

Answer 1

目前不可以，这在 Polymer.dart(或据我所知的 Polymer.js)中是不可能的。重复绑定(bind)需要一个可迭代对象(参见 Polymer_expressions 库的重复模板部分)。不幸的是由于 Issue 12669也不可能使用列表文字来完成此操作。

使用过滤器我们可以做到这一点:

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

创建一个导入 myelement.html 的页面并使用 <my-element></my-element>将输出:

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