dart - 如何在ObservableMap中更新有关对象属性更改的 View ？

Question

我有一个可观察的 map ，它将任意对象(例如另一幅 map )映射到其ID。当我对这些对象进行更改时，这些对象也应在 View 中更新。但是，我没有使其工作。到目前为止，这是我的设置:

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="{{change}}">Change</button>
    </div>
  </template>
</polymer-element>

myexample.dart

@CustomTag('my-example')
class MyExample extends PolymerElement {
  @observable Map<int, String> map = toObservable({'123': {'name': 'XYZ', 'size': 12}});

  MyExample.created() : super.created() {
    map.changes.listen((_) => notifyPropertyChange(#map, 1, 0));
  }

  void change() {
    var object = map['123']
    object['size'] = 100;
    map.notifyChange(new MapChangeRecord('123', null, object));
  }
}

单击“更改”按钮时，ID为“123”的对象在 map 中更新，但在 View 中未更新。有谁知道如何将更改交付到 View ？

Answer 1

<link rel="import" href="../../packages/polymer/polymer.html">

<polymer-element name="app-element">
  <template>

    <div>
      <ul>
        <template repeat="{{ entry in map.values }}">
          <li>x{{ entry['name'] }} {{ entry['size']}}</li>
          <template repeat="{{ item in entry.values}}">
            y{{item}}
          </template>
        </template>
      </ul>
      <button on-click="{{change}}">Change</button>
    </div>
  </template>
  <script type="application/dart" src="app_element.dart"></script>
</polymer-element>

进口'package:polymer / polymer.dart';

@CustomTag('app-element')
class AppElement extends PolymerElement {

  @observable
  Map map = toObservable({'123': {'name': 'XYZ', 'size': 12}});

    AppElement.created() : super.created();

  void change() {
    var object = map['123']['size'] = 100;
  }
}