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

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)); 
    } 
} 

在点击 'Change'-按钮，与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> 

进口 '包：聚合物/ 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; 
    } 
}