在 dart web components 中绑定一个简单的列表不起作用

Question

1. 我下载了 DartEditor
2. 我使用点击计数器示例创建了一个新的 Web 组件项目
3. 我做了一些修改

添加自定义组件，列表选择：

import 'package:polymer/polymer.dart';

@CustomTag('list-select')
class ListSelect extends PolymerElement {

  List<String> intls = const ["enUS", "nlNL"];

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

带有html

<polymer-element name="list-select">
  <template>
    <style>

    </style>
    <div>
      <select>
        <option template iterate="item in intls">{{item}}</option>
      </select>
    </div>
  </template>
  <script type="application/dart" src="list-select.dart"></script>
</polymer-element>

在 {{myappname}}.html 中，我添加了两行：

<link rel="import" href="list-select.html">

和

<list-select></list-select>

但是，我的选择仍然是空的。我忘记了什么？

Answer 1

Polymer 中没有iterate，并且缺少{{}}。

<option template iterate="item in intls">{{item}}</option>

应该是

<template repeat="{{item in intls}}"
  <option >{{item}}</option>
</template>

有一些元素（例如 <tr>）不允许在某些浏览器中包含其他元素，例如 <template>。
支持的解决方法是添加 template repeat 属性。

<tr template repeat="{{item in intls}}"><td>{{item}}</td></tr>

但通常你对repeat 和if 使用<template> 标签。