dart - Dart Polymer异步属性更改不起作用

Question

我无法异步更新 Dart Polymer 元素。

假设我有一个简单的元素，其中包含标签和文本输入。

模板

<polymer-element name="control-text">
    <template>
        <label for="{{id}}">{{label}}</label>
        <input id="{{id}}" value="{{value}}" type="text" />
    </template>
    <script type="application/dart" src="control-text.dart"></script>
</polymer-element>

Dart 文件

@CustomTag("control-text")
class ControlTextElement extends PolymerElement {

    @observable String id;

    @observable String value = "Value";

    @observable String label = "Label";

    ControlTextElement.created() : super.created();
}

我想使用 Timer从应用程序的初始化中异步更新create和更新此元素。

void main() {
    ControlTextElement element;

    // Add the element to a form
    initPolymer().run(() {
        element = new Element.tag("control-text");
        querySelector("#form").children.add(element);
    });

    // Function that updates the value of the element
    Function updateValue = (Timer t) {
        element.value += "Foo"; // Append "Foo" to the current value
        print(element.value);
    };

    // Start updating the value every 2 seconds  
    Timer timer = new Timer.periodic(new Duration(seconds: 2), updateValue);
}

在控制台中将打印正确的值，但是元素本身不会更新。手动更改文本框的值后，控制台将打印新值。

观察者设置正确，但是他们没有拿起异步更改。我想念什么？

Answer 1

您的计时器不是聚合物专区的一部分，因此，它无法正确地将其信息作为“可观察物”进行跟踪。参见有关depreciated web-ui mailing list的讨论。

解决方法是使用initMethod，如下所示:

void main() {
    // Initialize polymer.
    initPolymer();
}

@initMethod _init() {
    ControlTextElement element;

    // Add the element to a form
    element = new Element.tag("control-text");
    querySelector("#form").children.add(element);

    // Function that updates the value of the element
    Function updateValue = (Timer t) {
        element.value += "Foo"; // Append "Foo" to the current value
        print(element.value);
    };

    // Start updating the value every 2 seconds  
    Timer timer = new Timer.periodic(new Duration(seconds: 2), updateValue);
}