1

我无法异步更新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>

飞镖文件

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

    @observable String id;

    @observable String value = "Value";

    @observable String label = "Label";

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

我想从应用程序的初始化中异步更新创建和更新这个元素Timer。

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);
}

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

观察者设置正确，但他们没有接受异步更改。我错过了什么？

4

1 回答 1

2

您的计时器不属于您的 Polymer Zone，因此，它无法将其信息作为 Observable 正确跟踪。请参阅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);
}
于 2013-11-26T16:20:13.480 回答