从网络接收数据时 Dart web-ui 未更新答案

【问题标题】：Dart web-ui not updated when data received from network从网络接收数据时 Dart web-ui 未更新
【发布时间】：2013-05-29 16:28:35
【问题描述】：

我在 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']);
  }
}

问题是我在第一次点击时看不到数据。我需要点击按钮两次才能看到数据。

但是如果我如下所示手动填写codeList（不是来自网络数据），那么我会在第一次点击时看到数据：

void onMyButtonClick(Event  event) {

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

我需要模板在网络数据可用后进行迭代。在网络数据通过未来对象可用之前，事件循环似乎已经完成了绘制页面的工作。在 dart 中更新模型后，有没有办法刷新页面？

【问题讨论】：

可以给我们看一下codeList的声明吗？
您确定对'http://getData' 的第一个请求会返回您期望的结果吗？

标签： dart dart-webui

【解决方案1】：

如果您使用点击事件添加您的 codeList 当前填充它的原因是因为当前 web_ui 具有“观察者”，当事件发生时会自动调用它。然后同步填充列表。然而，观察者的缺点之一正是您的用例，当数据异步更新时，观察者不会及时反映变化。

因此，观察者被逐步淘汰并被可观察者取代。 Observables 允许我们标记要监视的变量以进行重新分配，当这种情况发生时，它将导致视图发生变化。例如：

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

稍后在代码中调用x = 1 时，它会自动触发视图更新。然而，这给我们留下了一个问题。当您添加到列表时，您并没有重新分配值本身。因此，可观察对象还提供了将列表转换为可观察列表的功能（这也适用于地图）。

例如，如果您将codeList 的声明更改为类似以下内容，那么当您稍后添加到列表时，它会相应更新。

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

有关使用@observable 和toObservable 的更多信息，另请参阅Dart Tutorial: Target 7。如需更深入的信息，请查看Observables and Data Binding上的文章

【讨论】：

【解决方案2】：

您需要使用@observable 注解标记您希望WebUi 监控的字段。否则，您只会获得初始值，而不会获得任何后续更新。

您可以直接在对象声明上执行此操作，也可以将整个类设为可观察的，然后将观察其所有字段。

例子见http://www.dartlang.org/docs/tutorials/custom-elements/#using-two-way-data-binding

【讨论】：