8

Dart コードで @observable 宣言を使用して、String または num 型を観察可能にすることができます。

@observable
var x = '';

および{{ }}htmlの構文：

<div>x = {{x}}</div>

ただし@observable、リストとマップでは機能しません。それらを観察可能にするにはどうすればよいですか？

4

1 に答える 1

16

toObservable()List または Map を引数として使用します。これにより、List または Map オブジェクトと UI でのその表現との間にバインディングが作成されます。

次の例では、 を使用していtoObservable()ます。List オブジェクトと Map オブジェクトには、毎秒データが追加されていることに注意してください。適切なバインディングをtoObservable()作成すると、これらのオブジェクトの UI が自動的に更新され、追加されたアイテムが表示されます。

リストまたはマップがclear()編集されると、UI はこれをもう一度反映します。

このようなスクリプトを作成して実行する方法については、http://www.dartlang.org/articles/web-ui/tools.html を参照して ください。

main.dartファイルは次のとおりです。

import 'dart:async';
import 'package:web_ui/web_ui.dart';

@observable
num x = 0;  // @observable works fine with a number. 

List list = toObservable(new List());

Map<String, num> map = toObservable(new Map());

void main() {
   new Timer.periodic(new Duration(seconds: 1), (_) {
     x += 1;
     list.add(x);
     map[x.toString()] = x;
     if (x % 4 == 0) {
       list.clear();
       map.clear();
     }
     return x;
   });
}

付属のdart.htmlファイルは次のとおりです。

<!DOCTYPE html>

<html>
  <body>
     <p>x = {{ x }}</p>

     <ul>
       <template iterate='item in list'>
         <li>list item = {{item}}</li>
       </template>
     </ul>

     <ul>
       <template iterate='key in map.keys'>
         <li>map key = {{key}}, map value = {{map[key]}}</li>
       </template>
     </ul>

    <script type="application/dart" src="main.dart"></script>
  </body>
</html>
于 2013-04-04T14:39:40.920 に答える