tôi có thể làm cho một chuỗi hoặc một loại num thể quan sát được bằng cách sử dụng tờ khai @observable trong mã Dart:Làm một bản đồ hoặc một danh sách quan sát được trong giao diện người dùng Web
@observable
var x = '';
và {{ }} cú pháp trong html:
<div>x = {{x}}</div>
Nhưng @observable không hoạt động với Danh sách và bản đồ. Làm thế nào để tôi có thể quan sát được?
Sử dụng toObservable() với Danh sách hoặc Bản đồ làm đối số. Điều này tạo ra một ràng buộc giữa Danh sách hoặc đối tượng Bản đồ và biểu diễn của nó trong giao diện người dùng.
Ví dụ sau sử dụng toObservable(). Lưu ý rằng các đối tượng Danh sách và Bản đồ có dữ liệu được thêm vào chúng mỗi giây. Với toObservable() tạo ràng buộc phù hợp, giao diện người dùng cho các đối tượng này sẽ tự động cập nhật để hiển thị các mục được thêm vào.
Khi Danh sách hoặc Bản đồ được clear() chỉnh sửa, giao diện người dùng lại một lần nữa phản ánh điều này.
Để biết hướng dẫn về cách tạo và chạy tập lệnh như tập lệnh này, hãy xem http://www.dartlang.org/articles/web-ui/tools.html.
Đây là main.dart file:
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;
});
}
Và đây là kèm theo dart.html file:
<!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>