使用 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 拾取。