如何使用和迭代Dart Polymer中的可观察地图？

Question

请考虑以下代码:

myexample.html

<polymer-element name="my-example">
  <script type="application/dart" src="myexample.dart"></script>
  <template>
    <style></style>
    <div>
    <ul>
        <template repeat="{{ entry in map.values }}">
          <li>{{ entry }}</li>
        </template>
    </ul>
    <button on-click="{{add}}">Add</button>
    </div>
  </template>
</polymer-element>

myexample.dart

@CustomTag('my-example')
class MyExample extends PolymerElement {
  @observable Map<int, String> map = toObservable({});
  int i = 0;

  MyExample.created() : super.created();

  void add() {
    map[i++] = i.toString();
  }
}

每次单击"添加"按钮时都会填充地图,但地图条目不会显示在myexample.html中.那么:如何正确使用(并迭代)一个可观察的Map,以便html文件中的列表自动更新？

Answer 1

聚合物 >= 1.0.0-rc.x

新的 Polymer 中不再使用 Observable。
我在新聚合物中能做的最好的事情是

镖

@HtmlImport('app_element.html')
library dom_repeat_map.web.app_element;

import 'package:web_components/web_components.dart' show HtmlImport;
import 'package:polymer/polymer.dart';

@PolymerRegister('app-element')
class AppElement extends PolymerElement {
  AppElement.created() : super.created();

  Map _data = {'a': 1, 'b': 2, 'c': 3, 'd': 4, 'e': 5, 'f': 6};

  @property
  Iterable get dataKeys => _data.keys;

  @reflectable
  int dataValue(String key) => _data[key];
}

另请参阅Polymer Dart 1.0 中地图的替代方案是什么？

html

<dom-module id='app-element'>
  <template>
    <template is="dom-repeat" items="{{dataKeys}}" as="key">
      <div><span>[[key]]</span>-<span>[[dataValue(key)]]</span></div>
    </template>
  </template>
</dom-module>

仅 Polymer.dart <= 0.16.x

模板重复代码就可以了。如果你像这样初始化地图

@observable Map<int, String> map = toObservable({10: '10', 11: '11'});

您将在页面上看到这些值。我必须进一步调查以了解为什么当您添加新条目时它没有更新。

在问题解决之前你可以使用什么：

@HtmlImport('app_element.html')
library dom_repeat_map.web.app_element;

import 'package:web_components/web_components.dart' show HtmlImport;
import 'package:polymer/polymer.dart';

@PolymerRegister('app-element')
class AppElement extends PolymerElement {
  AppElement.created() : super.created();

  Map _data = {'a': 1, 'b': 2, 'c': 3, 'd': 4, 'e': 5, 'f': 6};

  @property
  Iterable get dataKeys => _data.keys;

  @reflectable
  int dataValue(String key) => _data[key];
}