dart - 使用Dart Polymer观察内部模型属性

Question

我正在设置需要显示模型数据的自定义Polymer元素(需要传递的Property对象)。

我可以成功显示属性的值，但是当我在Property对象内更新值时，该值在元素内不会更新。

我想念什么？我基于以下示例:

https://github.com/sethladd/dart-polymer-dart-examples/tree/master/web/bind_component_field_to_model_field

https://github.com/sethladd/dart-polymer-dart-examples/tree/master/web/getter_setter_as_attribute

wb-control-text.html

<polymer-element name="wb-control-text">
  <template>
    <div>
      <label for="{{id}}">{{label}}</label>
      <input type="text" id="{{id}}" value="{{value}}" />
      <button on-click="{{updateValue}}">Update me</button>
    </div>
  </template>
  <script type="application/dart" src="wb-control-text.dart"></script>
</polymer-element>

wb-control-text.dart

import "package:polymer/polymer.dart";
import "package:rqn_workbench/wb-property.dart";

@CustomTag("wb-control-text")
class WorkbenchControlTextElement extends PolymerElement {

  final TextProperty _idProperty = new TextProperty("id", value: "1");

  final TextProperty _valueProperty = new TextProperty("value", value:"Bla");

  final TextProperty _labelProperty = new TextProperty("label", value:"Label!");

  WorkbenchControlTextElement.created() : super.created();

  @published String get id => _idProperty.value;
  void set id(String id) { _idProperty.value = id; }

  @published String get value => _valueProperty.value;
  void set value(String value) { _valueProperty.value = value; }

  @published String get label => _labelProperty.value;
  void set label(String label) { _labelProperty.value = label; }

 void updateValue() {
    value += "Bla"; 
    print(value); // Will print the appended value
  }
}

wb-property.dart

library workbench_property;

import "package:polymer/polymer.dart";

@observable
class Property {

  String key;

}

@observable
class TextProperty extends Property {

  String value;

  TextProperty ( String key, {String value} ) {
    this.key = key;
    this.value = value;
  }

}

Answer 1

解决方案是在getter和setter上使用 @reflectable ，因此可以由PathObserver拾取。