我怎么知道模板重复已经完成？

Question

Element 需要一些时间让 template-repeat 渲染所有内容，所以使用 paper-spinner 通知用户等待。

我怎么知道模板重复已经完成以便我可以关闭微调器？

以及相关问题：如何选择内部元素 "item-details"？同样，必须先完成模板重复。

这是我使用的代码：

<polymer-element name="item-list">

  <template>
    <paper-spinner active></paper-spinner>

    <template id="repeat_items" repeat="{{ item  in  car.items }}">
         <item-details id="item_details" item="{{item}}"></item-details>
    </template>....

这是对问题的一些模拟：plnkr.co

编辑

来自研究的链接：

spinner example

why does onmutation disconnect after first mutation?

polymer-how-to-watch-for-change-in-content-properties

Answer 1

有component lifecycle hooks.

您可能正在寻找 domReady。

Called when the element’s initial set of children are guaranteed to exist. This is an appropriate time to poke at the element’s parent or light DOM children. Another use is when you have sibling custom elements (e.g. they’re .innerHTML‘d together, at the same time). Before element A can use B’s API/properties, element B needs to be upgraded. The domReady callback ensures both elements exist.

Polymer('tag-name', {
  domReady: function() {
     // hide the spinner 
     // select the first item details element
  }
});

至于选择元素，你可以像这样遍历组件的阴影dom：

this.shadowRoot.querySelector(selector);

编辑...

如果您预先拥有所有数据，domReady 挂钩非常有用。如果您异步获取数据，那么您可以使用 change watcher.

这里是a fork of your plunkr数据变化后成功选择子组件。请注意 setTimeout(f, 1) 将选择推迟到 DOM 更新之后。

carsChanged: function(){
    var _this = this;
    setTimeout(function(){
       console.log(_this.shadowRoot.querySelectorAll('item-details'))
    },1)
}

Answer 2

我建议这样 - http://jsbin.com/bifene/4/edit

利用 Polymer 的 onMutation 函数来监视对 DOM 节点的更改。请注意，它只会被调用一次，因此您每次加载新项目并重新启动微调器时都需要重新注册它。

我怎么知道模板重复已经完成？

How can I know that Template Repeat has finished?

polymer