In the following example, when the Refresh class button is clicked, {{testClass.someProperty}} is updated with the new class' someProperty, but updating testClass.someProperty does not refresh {{testClass.someProperty}} in the template.
I thought that creating TestClass @observable would make its properties visible, and when the property was updated, the property in the template would change.
What will be the correct way to bind TestElement.testClass.someProperty to {{testClass.someProperty}} and how to extend any class properties for the polymer element template?
test_class.dart
library test;
import "package:polymer/polymer.dart";
@observable
class TestClass extends ObservableBase {
String someProperty;
TestClass(this.someProperty);
}
test_element.dart:
library test_element;
import "package:polymer/polymer.dart";
import "test_class.dart";
@CustomTag("test-element")
class TestElement extends PolymerElement with ObservableMixin {
@observable
TestClass testClass = new TestClass("original");
void updateClass() {
testClass = new TestClass("xyz");
}
void updateProperty() {
testClass.someProperty = "foobar";
}
}
test_element.html
<polymer-element name="test-element">
<template>
{{testClass.someProperty}}
<button on-click="updateProperty">Update Property</button>
<button on-click="updateClass">Update Class</button>
</template>
<script type="application/dart" src="test_element.dart"></script>
</polymer-element>
test.dart
library test;
int main() {
}
test.html:
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="test_element.html" />
<script src="packages/polymer/boot.js"></script>
</head>
<body>
<test-element></test-element>
<script type="application/dart" src="test.dart"></script>
</body>
</html>
source
share