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

タイマーはポリマー ゾーンの一部ではないため、オブザーバブルとして情報を適切に追跡できません。廃止されたweb-ui メーリング リストの議論を参照してください。

修正は、次のように 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 に答える