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

Question

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

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

以及相关问题:如何选择内部元素“项目详细信息”？同样，模板重复必须首先完成。

这是我正在使用的代码:

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

至于选择元素，你可以像这样遍历组件的 shadow dom:

this.shadowRoot.querySelector(selector);

编辑...
domReady如果您预先拥有所有数据，hook 会很棒。如果你异步获取数据，那么你可以使用 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)
}