在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动态加载内容后执行功能

回答

相关问题