绑定dart Web组件中的简单列表将不起作用

时间:2014-11-19 15:50:41

标签: dart dart-polymer

  1. 我下载了DartEditor
  2. 我使用点击计数器示例
  3. 创建了一个新的Web组件项目
  4. 我做了一些修改
  5. 添加了自定义组件,list-select:

    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>
    

    但是,我的选择保持为空。我忘了什么?

1 个答案:

答案 0 :(得分: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>

但通常您会为<template>repeat使用if标记。