Observing internal model attributes with Dart Polymer

Question

I'm setting up custom Polymer elements that need to display data from the model (Property objects that need to be passed around).

I can successfully display the values of the properties, but when I update a value inside a Property object, the value is not updated inside the element.

What am I missing? I based myself on the following examples:

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

The solution was to use @reflectable on the getters and setters, so it could be picked up by the PathObserver.