Question

我们说我有一个Polymer元素x-foo，它使用模板进行数据绑定。

<template>
  <!--shadow DOM-->
  <template repeat='{{item in items}}'>
    <div class='content'>{{item}}</div>
  </template>
</template>

items是x-foo的属性，用于决定视图中的内容。

现在，我在x-foo的其中一个方法中动态：

this.items = getNewItemList();

然后尝试访问shadow DOM内容，

this.shadowRoot.querySelectorAll('.content') // was supposed to return 5 elements

我发现Polymer仍然没有遍历模板循环并生成了我的影子DOM内容。有没有办法知道什么时候完成它？

Answer 1

通过设计，Polymer会等到你的JavaScript完成处理之后才会执行昂贵的操作，例如搞乱DOM。这样你就可以同时做几个操作，而不用担心破坏DOM并减慢你的应用程序。

对你的问题的简短回答是做这样的事情：

this.items = getNewItemList();
this.async(
  // `async` lets the main loop resume and perform tasks, like DOM updates,
  // then it calls your callback 
  function() {
    this.contents = this.shadowRoot.querySelectorAll('.content'); 
  }
);

更好的答案是避免需要查询元素。相反，让元素通过事件与容器进行通信，甚至使用＆＃39;项目＆＃39;对象（数据模型）。如果您可以从数据模型中驱动UI，而不是相反，那么您将有更好的时间。

如何判断Polymer何时完成所有数据绑定？

1 个答案: