コンテンツがAureliaに動的に読み込まれた後に関数を実行

Question

私は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(); 

ので、私の機能を変更することを意図している要素はまだ利用できません。私が使用している現在の回避策は、200ms待ってから関数を実行することです。

動的に読み込まれたコンテンツがいつ添付されるかを知る方法（イベントまたは機能）はありますか？またはinnerHTML.bindよりコンテンツをテンプレート化する別の方法ですか？

Answer 1

技術的には、AureliaはDOMに自身を添付しており、この段階であなたが何をページに入れているのかは分かりません。しかし、これはタスクキューの候補のように思えます。 aurelia-composedと呼ばれるe2eテストを主な目的としたイベントがあることを覚えています。

タスクキューを使用すると、Aureliaがif/showバインディングなどのタスクの優先順位付けに使用するタスクキューの最下部にタスクをプッシュできます。私はこれがあなたがしたいことをするかもしれないと信じています。

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(); 
     }); 
    }); 
}