4

在下面的示例中，当单击更新类按钮时，{{testClass.someProperty}} 会更新为新类的 someProperty，但更新 testClass.someProperty 不会更新模板中的 {{testClass.someProperty}}。

我认为使 TestClass @observable 可以使其属性可观察，并且在更新属性时，模板中的属性会发生变化。

将 TestElement.testClass.someProperty 绑定到 {{testClass.someProperty}} 以及作为扩展，将任何类的属性绑定到 Polymer Element 模板的正确方法是什么？

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>

测试.dart

library test;

int main() {

}

测试.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>
4

1 回答 1

0

我通过将@observable 从类移动到属性来让它工作。我认为用 @observable 注释类应该与将所有属性注释为可观察的相同，但这不起作用：

测试.dart

图书馆测试；

import "package:polymer/polymer.dart";

class TestClass extends ObservableBase {
  @observable
  String someProperty;
  TestClass(this.someProperty);
}
于 2013-10-07T17:39:04.030 回答