Question

Element需要一些时间来模板重复来呈现所有内容，因此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。

当元素的初始子集保证存在时调用。这是戳到元素的父或轻DOM子项的适当时间。另一个用途是当你有兄弟自定义元素时（例如，它们是.innerHTML在一起，同时）。在元素A可以使用B的API /属性之前，需要升级元素B. domReady回调确保两个元素都存在。

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是在数据更改后成功选择子组件的{{3}}。注意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节点的更改。请注意，它只会被调用一次，所以每次加载新项目时都需要重新注册它。重启微调器。

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

2 个答案: