Возникли проблемы с полимерным повтором

Я очень новичок в Polymer (и в Dart), и я подозреваю, что здесь не хватает чего-то очевидного. В моем приложении есть код, который выполняет итерацию по списку объектов и представляет элементы как элементы LI в UL. Список отображается некорректно.

После упрощения того, что у меня есть, вот код Dart для моего пользовательского элемента:

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>

dart dart-polymer
person user3154375    schedule 06.01.2014    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Ваш код 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>
person Shailen Tuli    schedule 06.01.2014