0
考慮這個元素(最小爲這個問題的目的):如何強制一個Polymer.Element擴展類執行其生命週期,而不附加到DOM?
class MyCountDown extends Polymer.Element
{
static get is() { return 'my-count-down'; }
static get properties()
{
return {
time: { /* time in seconds */
type: Number,
observer: '_startCountDown'
},
remains: Number
}
}
_startCountDown()
{
this.remains = this.time;
this.tickInterval = window.setInterval(() => {
this.remains--;
if (this.remains == 0) {
console.log('countdown!');
this._stopCountDown();
}
}, 1000);
}
_stopCountDown() {
if (this.tickInterval) {
window.clearInterval(this.tickInterval);
}
}
}
customElements.define(MyCountDown.is, MyCountDown);
如果我得到一個實例,設置屬性時間,
let MyCountDown = customElements.get('my-count-down');
let cd = new MyCountDown();
cd.time = 5;
財產時間變化但是觀察者和_startCountDown()函數未被調用。我相信聚合物正在等待實例附加到DOM,因爲實際上,當我將appendChild()這個元素添加到文檔時,開始倒計數,5秒鐘後控制檯按預期記錄'countdown!'
。
我的目標是不附加任何東西的文檔,因爲MyCountDown的情況下,並不總是附着在視圖執行這個生命週期,但/和他們需要我的web應用程序的不同組件之間的活代碼。
一個解決方案是將新的MyCountDown實例附加到dom的隱藏元素上,以強制實現聚合物生命週期,但我認爲這不太直觀。