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