在聚合物中,dom-repeat
模板幫助程序每當將迭代結果標記到DOM中時都會發出dom-change
事件。有沒有辦法讓我知道所有迭代完成的時間?如何判斷dom重複何時完成衝壓元素
7
A
回答
8
也許這個簡單的例子可以幫助解釋行爲並擴展評論。
<dom-module id="change-tester">
<template>
<h1>Change Tester</h1>
<ul>
<template id="template" is="dom-repeat" items="{{content}}">
<li>{{item}}</li>
</template>
</ul>
<button on-click="more">Add more</button>
</template>
</dom-module>
<script>
Polymer({
is: 'change-tester',
properties: {
content: {
type: Array,
value: function(){ return ["one", "two", "three"]}
}
},
ready: function(){
this.$.template.addEventListener("dom-change", function(event){
console.log(event);
});
},
more: function(){
this.push("content", "four");
this.push("content", "five");
}
});
</script>
每當dom-change
被激發,我記錄事件到控制檯,所以打開開發者工具,看一看。最初,dom-repeat
有三個迭代,並將用三個元素填充dom。請注意,只有一個事件會觸發,即所有三個元素都已添加。如果您點擊該按鈕,則會在重複內容中添加兩個項目。由於dom-repeat
異步更新,這兩個項目再一次處理,只會觸發一個事件。
因此dom-change
事件實際上是您正在尋找的最終事件。如果您操作與其綁定的物品,它只會再次觸發。
1
要訪問動態創建的節點(如模板重複) 使用:。
這$$( '#ID')
這個$,而不是ID
例如,如果模板ID爲 「模板」,你應該使用
這一點。$$( '#模板')
ready: function(){
this.$$('#template').addEventListener("dom-change", function(event){
console.log(event);
});
},
相關問題
- 1. 如何判斷animateLayoutChanges何時完成?
- 2. iOS如何判斷webViewDidFinishLoad何時完成?
- 3. 如何判斷Image.FromStream完成
- 4. Android - 如何判斷MediaPlayer何時緩衝
- 5. 如何判斷MXML組件何時完全創建完成?
- 6. 如何判斷哪些事件綁定到DOM元素?
- 7. 如何判斷DOM元素是HTML還是SVG?
- 8. 如何判斷是否顯示DOM元素?
- 9. Naudio,如何判斷播放完成
- 10. 如何判斷元素是否位於DOM中的另一個元素之前
- 11. 如何判斷iOS中的簡單png動畫何時完成?
- 12. 如何判斷對象初始化程序何時完成
- 13. 如何判斷curl_multi_exec何時完成_sending_ data
- 14. 如何判斷MKMapView和可見MKAnnotationView何時完成繪圖?
- 15. 如何判斷我的EAP呼叫批次何時完成?
- 16. 如何判斷IPC :: Run作業何時完成
- 17. 如何判斷Microsoft地圖對象何時加載完成
- 18. 如何判斷AudioTrack對象何時完成播放?
- 19. Android:如何判斷服務何時完成
- 20. 如何判斷JUnit何時通過使用TestWatcher完成?
- 21. 如何判斷Directshow.net轉換何時完成?
- 22. wpf如何判斷數據綁定何時完成?
- 23. 如何判斷location.reload()何時完成刷新頁面?
- 24. 如何判斷swf何時從javascript完成加載?
- 25. 如何判斷遞歸方法何時完成
- 26. 如何判斷dde響應何時完成?
- 27. 如何判斷jsc3d何時完成渲染?
- 28. 如何判斷我的ThreadPool何時完成其任務?
- 29. 如何判斷viewpager何時完成加載
- 30. 如何判斷請求何時完成(ASIHTTPRequest)?
是否有可能通過查看dom變更事件中的數據來確定此事 - 知道哪些數據項應該是最後的,然後檢查該數據?然而,也許不是理想的解決方案。 – newfivefour
https://github.com/Polymer/polymer/blob/master/src/lib/template/dom-repeat.html @ 348它在render() –
結束時觸發了一個事件,正如Robert在'dom當「dom-repeat」模板的渲染完成時,會觸發-change'事件。然後,您應該能夠添加到您的模板中,以下代碼行將在該事件被觸發時執行一個函數:'' –