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事件添加codeList，则当前填充codeList的原因是因为当前web_ui具有“watchers”，当事件发生时会自动调用它们。然后，您可以同步填充列表。然而，观察者的一个缺点正是你的用例，当数据异步更新时，观察者不会反映时间的变化。

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

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

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

例如，如果您将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

上的文章

Answer 2

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

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

有关示例，请参阅http://www.dartlang.org/docs/tutorials/custom-elements/#using-two-way-data-binding

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

2 个答案: