你怎么知道模板何时在聚合物飞镖中初始化？答案

【问题标题】：How do you know when templates have been initialized in polymer dart?你怎么知道模板何时在聚合物飞镖中初始化？
【发布时间】：2013-08-12 17:30:16
【问题描述】：

聚合物 js 文档说您必须侦听 WebComponentsReady 事件才能知道何时设置了聚合物元素。 Dart 中的等价物是什么？

这是我的模板：

 <template id="order_name" bind repeat>
   <div class="accordion-group">
     <div class="accordion-heading">
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#order_list" href="#collapseOne">
         {{commonName}} ({{scientificName}})
       </a>
     </div>
     <div id="collapseOne" class="accordion-body collapse">
       <div class="accordion-inner">
         ...
       </div>
     </div>
   </div>
 </template>

这是主要的：

void main() {
  OrderList().then((order_data) {
    query("#order_name").model = order_data;
    print (queryAll(".accordion-heading")); //null
  }).catchError((err) => print(err));

  query("#my-button").onClick.listen((Event e) {
     print (queryAll(".accordion-heading")); //[div,div]
  });
}

OrderList 是 HttpRequest.getString() 的包装器并返回一个未来。我的想法是使用 WebComponenentsReady 之类的事件来了解模板何时已完全实例化。基本问题是如何获取 main 中的 .accordion-heading div，以便将侦听器附加到它们？

【问题讨论】：

标签： templates dart polymer

【解决方案1】：

我假设您使用的是boot.js。如果你是，它们应该在你程序输入main()时被初始化。

【讨论】：

是的，使用 boot.js。用代码更新了问题以显示我所追求的。

【解决方案2】：

根据规范 (https://www.dartlang.org/articles/web-ui/spec.html#main-script)：

...您不能查询条件节点和迭代节点的子节点。 ...要检索组件实例，您需要将查询推迟到事件循环结束，例如使用 Timer.run(f)。

所以上面的代码需要这样修改：

void main() {
  OrderList().then((order_data) {
    query("#order_name").model = order_data;
    print (queryAll(".accordion-heading")); //null

    Timer.run( () => print (queryAll(".accordion-heading"))); //[div,div]

  }).catchError((err) => print(err));

  query("#my-button").onClick.listen((Event e) {
     print (queryAll(".accordion-heading")); //[div,div]
  });
}

【讨论】：