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>

飞镖文件

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

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

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

Answer 1

您的计时器不属于您的聚合物区域，因此，它无法正确跟踪其信息作为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);
}

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

1 个答案: