1

Web コンポーネントに次のフラグメントがあります。

<div id="mycodes">                     
<template iterate='code in codeList'>
   {{code}}
</template>  
</div>

また、Dart ファイルでcodeListは、ユーザーがボタンをクリックするとデータが入力されます。

void onMyButtonClick(Event  event) {
  HttpRequest.getString('http://getData').then((response) {
  mylist = json.parse(response);
  for(var code  in mylist){
    codeList.add(code['c']);
  }
}

問題は、最初のクリックでデータが表示されないことです。データを表示するには、ボタンを 2 回クリックする必要があります。

しかし、codeList以下に示すように (ネットワーク データからではなく) 手動で入力すると、最初のクリックでデータが表示されます。

void onMyButtonClick(Event  event) {

    codeList.add("data 1");
    codeList.add("data 2");
  }
}

ネットワーク データが利用可能になった後、反復するテンプレートが必要です。ネットワーク データが future オブジェクトを通じて利用可能になる前に、イベント ループはページを描画するという仕事を既に終えているようです。モデルがダーツで更新された後にページを更新する方法はありますか?

4

2 に答える 2

2

オンクリック イベントで追加した場合に codeList が現在設定されている理由は、現在の web_ui に、イベントが発生したときに自動的に呼び出される「ウォッチャー」があるためです。次に、リストを同期的に設定します。ただし、ウォッチャーの欠点の 1 つはまさにユース ケースです。データが非同期に更新されると、ウォッチャーは時間の変更を反映しません。

その結果、ウォッチャーは段階的に廃止され、オブザーバブルに置き換えられています。オブザーバブルを使用すると、再割り当てのために変数を監視するようにフラグを立てることができます。それが発生すると、ビューが変更されます。例えば：

@observable int x = 0;
// ...
x = 1;

コードのx = 1後半で が呼び出されると、ビューの更新が自動的にトリガーされます。ただし、これには 1 つの問題が残ります。リストに追加するとき、値自体を再割り当てしていません。そのため、オブザーバブルはリストをオブザーバブル リストに変換する機能も提供します (これはマップでも機能します)。

たとえば、宣言をcodeList次のように変更した場合、後でリストに追加すると、それに応じて更新されます。

var codeList = toObservable([]); // Assuming it starts with an empty list
// or
var codeList = toObservable(_startCodeList); // if you already have a list

との使用の詳細については、 Dart チュートリアル: Target 7も参照してください。詳細については、オブザーバブルとデータ バインディングに関する記事をご覧ください。@observabletoObservable

于 2013-05-30T12:32:58.663 に答える
0

WebUi で監視するフィールドを @observable アノテーションでマークする必要があります。それ以外の場合は、その後の更新ではなく、初期値のみを取得します。

これは、オブジェクト宣言で直接行うか、クラス全体を監視可能にして、そのすべてのフィールドを監視することができます。

例については、http://www.dartlang.org/docs/tutorials/custom-elements/#using-two-way-data-bindingを参照してください。

于 2013-05-30T09:25:33.487 に答える