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

这是一个错误。我刚刚提交了它：

https://code.google.com/p/dart/issues/detail?id=15407

请为问题加注星标，以便在修复错误时收到通知。

Answer 2

聚合物＆gt; = 1.0.0-rc.x

新聚合物中不再使用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];
}

另见What is the alternative to maps in 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＆lt; =仅0.16.x

模板重复代码很好。如果您初始化地图，如

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

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

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

library x;

import 'dart:async';
import 'package:polymer/polymer.dart';

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

  int i = 0;

  MyExample.created() : super.created() {
    map.changes.listen((e) => mapChanged(null));
  }

  @observable List<int> get keys => toObservable(map.keys.toList());
  @observable List<String> get values => toObservable(map.values.toList());

  void mapChanged(old) {
    print('mapChanged');
    this.notifyPropertyChange(#keys, 1, 0); // there are better values than 1 and 0 I guess, but it works
    this.notifyPropertyChange(#values, 1, 0);
  }

//  void attached() {
//    super.attached();
//    new Timer.periodic(new Duration(milliseconds: 2000), (e) => add());
//  }

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

Answer 3

错误在最前沿修复：

https://codereview.chromium.org/213743012/

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

3 个答案: