在 Aurelia 中动态加载内容后执行函数

Question

我正在使用 Aurelia。

我有一条 post 路线，它显示 post 给定传递的 id。服务器将用于将 post 写入 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();

它将失败，因为内容尚未附加，因此我的函数要更改的元素尚不可用。我目前使用的解决方法是等待 200 毫秒，然后执行函数。

有什么方法（事件或函数）可以知道何时附加了动态加载的内容？或者也许是另一种模板化内容的方式而不是 innerHTML.bind?

Answer 1

从技术上讲，Aurelia 已将自己附加到 DOM，并且对您在此阶段放入页面的内容一无所知。但是，这听起来像是任务队列的候选者。我还记得有一个事件你可以附加到主要针对 e2e 测试的事件称为 aurelia-composed 但我从来不需要或调查过它。

任务队列允许您将任务推送到任务队列的底部，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();
        });
    });
}

在 Aurelia 中动态加载内容后执行函数

Execute function after content has been dynamically loaded in Aurelia

javascript

aurelia

aurelia-templating