Question

在下面的示例中，单击Update Class按钮时，{{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>

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>

Answer 1

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

<强> test.dart

库测试;

import "package:polymer/polymer.dart";

class TestClass extends ObservableBase {
  @observable
  String someProperty;
  TestClass(this.someProperty);
}

在dart PolymerElement模板中使所有类属性可观察

1 个答案: