1

我在 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 中更新模型后，有没有办法刷新页面？

4

2 回答 2

2

如果您使用单击事件添加 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

另请参阅Dart 教程：Target 7以获取有关使用@observable和的更多信息toObservable。有关更深入的信息，请查看有关Observables 和数据绑定的文章

于 2013-05-30T12:32:58.663 回答
0

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

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

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

于 2013-05-30T09:25:33.487 回答