Question

聚合物js docs说你必须听取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，以便我可以将听众附加到它们身上？

Answer 1

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

Answer 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]
  });
}

你怎么知道模板在聚合物飞镖中初始化的时间？

2 个答案: