当前位置: 动力学知识库 > 问答 > 编程问答 >

Making all class properties observable in a dart PolymerElement template

问题描述:

In the following example, when the Update Class button is clicked, {{testClass.someProperty}} is updated with the new class' someProperty, but updating testClass.someProperty does not update {{testClass.someProperty}} in the template.

I thought making the TestClass @observable would make its properties observable and when updating the property, the property in the template would change.

What would be the correct way to bind TestElement.testClass.someProperty to {{testClass.someProperty}}, and as an extension, any class' properties to a 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>

网友答案:

I got it to work by moving @observable from the class to the property. I thought annotating the class with @observable was supposed to be the same as annotating all the properties as observable, but that didn't work:

test.dart

library test;

import "package:polymer/polymer.dart";

class TestClass extends ObservableBase {
  @observable
  String someProperty;
  TestClass(this.someProperty);
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: