在Aurelia動態加載內容後執行功能

我有一個post路線，顯示一個帖子給出通過id。服務器編譯以前寫的帖子HTML的降價，和我使用的加載在我的模板此內容：

<div innerHTML.bind="post.content"></div>

// in the activate() function 
client 
    .fetch(`api/post/${params.id}`) 
    .then(res => res.json()) 
    .then(data => { 
     this.post = data; 

     // this is the workaround I am currently using 
     setTimeout(this.displayLineNumbers, 200); 
    });

我找不到任何方法來執行某一功能內容已附加到視圖。如果我只用：

this.post = data; 
this.displayLineNumbers();

它會失敗，因爲內容尚未連接還沒有，因此我的功能是爲了更改的元素尚未公佈。我正在使用的當前解決方法是等待200毫秒，然後執行該功能。

有什麼方法（事件或功能）知道何時動態加載的內容被連接？或者，也許另一種模板內容的方式比innerHTML.bind？

來源

2017-02-15 nicovank

從技術上來說，Aurelia已經將自己附加到了DOM上，並且在這個階段對於你在頁面上的內容一無所知。但是，這聽起來像是任務隊列的候選人。我還記得有一個事件可以附加到主要針對e2e測試的名爲aurelia-composed，但我從來沒有需要或看過。

通過任務隊列，您可以將任務推送到Aurelia用來確定任務優先級的任務隊列的底部，如if/show綁定和whatnot。我相信這可能會做你想做的事。

import {TaskQueue} from 'aurelia-framework'; 

activate() { 
client 
    .fetch(`api/post/${params.id}`) 
    .then(res => res.json()) 
    .then(data => { 
     this.post = data; 

     this.taskQueue.queueMicroTask(() => { 
      this.displayLineNumbers(); 
     }); 
    }); 
}

來源

2017-02-15 06:39:14

這是一個問題，許多人問及...和一個很好的解決方法。看起來Aurelia應該考慮添加一個自動添加'.queueMicroTask（）'並調用viewmodel方法（如'bindingFinished（）'）的生命週期鉤子（如果可能）。 – LStarky

我們建議爲此使用'queueMicroTask'，並在我們的官方培訓課程中教授這一點。 –

在Aurelia動態加載內容後執行功能

回答

相關問題