聚合物重复发生故障

Question

我对聚合物（和飞镖）非常陌生，我怀疑我错过了一些很明显的东西。在我的应用程序中，我有遍历对象列表的代码，并将项目显示为UL中的LI元素。该列表没有得到正确渲染。

简化我有什么后，这里是我的自定义元素的飞镖代码：

import 'package:polymer/polymer.dart'; 

@CustomTag('users-element') 
class UsersElement extends PolymerElement { 
    @observable List users = toObservable(['Mike', 'Anne', 'Kim']); 
    UsersElement.created() : super.created() {} 
} 

，这里是相关的HTML代码：

<polymer-element name="users-element"> 
    <template> 
    <ul> 
     <li repeat="{{user in users}}"> 
     {{user}} 
     </li> 
    </ul> 
    </template> 
    <script type="application/dart" src="users_element.dart"></script> 
</polymer-element> 

Answer 1

您的DART代码看起来不错。问题是您使用repeat的方式。 您无法直接将repeat添加到<li>。相反，您需要 将<li>换成<template>标记，然后将repeat附加到该标记。 这应该工作：

<polymer-element name="users-element"> 
    <template> 
    <ul> 
     <template repeat="{{user in users}}"> 
     <li> 
      {{user}} 
     </li> 
     </template> 
    </ul> 
    </template> 
    <script type="application/dart" src="users_element.dart"></script> 
</polymer-element>