Question

我有一个可观察的地图，它将任意对象（比如另一个地图）映射到他们的id。当我对这些对象进行更改时，也应该在视图中更新对象。但是，我没有让它工作。这是我到目前为止的设置：

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”的对象将在地图中更新，但不会在视图中更新。有谁有想法，如何将更改传递给视图？

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>

import'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;
  }
}

如何更新ObservableMap中对象属性更改的视图？

1 个答案: