如何判斷聚合物何時完成所有數據綁定？

比方說，我有一個聚合物元素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();

，然後嘗試訪問影子DOM內容，

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

我發現聚合物仍然不是招不會遍歷模板循環並生成我的影子DOM內容。有沒有辦法知道它何時完成它？

來源

2014-06-22 Sachin Hosmani

按照設計，聚合物會等到您的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'); 
    } 
);

一個更好的答案是爲了避免需要查詢的內容。相反，讓元素通過事件或甚至使用'item'對象（數據模型）與容器進行通信。如果你可以從你的數據模型驅動你的用戶界面，而不是相反，你會有更好的時間。

來源

2014-06-22 01:00:07

如何判斷聚合物何時完成所有數據綁定？

回答

相關問題