dart - 从网络接收数据时，Dart Web-ui未更新

Question

我在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中更新模型后，是否可以刷新页面？

Answer 1

如果您在代码列表中添加on-click事件，则当前填充该代码列表的原因是因为当前的web_ui具有“观察程序”，当事件发生时会自动调用它们。然后，您同步填充列表。但是，观察者的缺点之一就是您的用例，当数据异步更新时，观察者无法反射(reflect)时间的变化。

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

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

稍后在代码中调用 x = 1时，它将自动触发 View 更新。但是，这给我们带来了一个问题。在添加到列表时，您不会重新分配值本身。因此，可观察对象还提供了将列表转换为可观察列表的功能(这也适用于 map )。

例如，如果您将 codeList的声明更改为以下内容，则稍后添加到列表中时，它将相应地更新。

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

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