在Aurelia中动态加载内容后执行功能

Question

我正在使用Aurelia.

我有一个post路线,显示一个给定通过的帖子id.服务器编译用于将帖子写入HTML的Markdown,我使用以下命令在我的模板中加载此内容:

<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,并且在此阶段对您在页面中添加的内容一无所知.但是,这听起来像是任务队列的候选者.我还记得有一个事件可以附加到主要针对e2e测试,aurelia-composed但我从来没有需要或调查过.

任务队列允许您将任务推送到任务队列的底部,Aurelia使用该任务队列来确定任务的优先级,例如if/show bindings等等.我相信这可能会做你想做的事情.

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