聚合物 >= 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());
}
}