5

次のコードを検討してください。

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 に表示されません。だから：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 では使用されなくなりました。
新しい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 に答える