5

考虑以下代码：

我的例子.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>

我的例子.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 文件中的列表自动更新？

4

3 回答 3

3

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

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

请给问题加注星标，以便在修复错误时通知您。

于 2013-12-02T19:52:28.213 回答
2

聚合物 >= 1.0.0-rc.x

Observable 不再用于新的 Polymer 中。
我能在新聚合物中做的最好的工作是

镖

@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];
}

另请参阅聚合物 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'});

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

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

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());
  }
}
于 2013-12-02T19:09:28.040 回答
1

该错误已在最前沿修复：

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

于 2014-04-02T07:23:04.190 回答