Javascript 将p5js添加到Ember应用程序

我正在尝试将p5js javascript库合并到我的Ember.js应用程序中。我希望模板上显示以下p5js示例：

我已将cdn脚本包括在index.html文件中：

---

我不知道在Ember run循环中如何/在何处放置javascript，以便在页面加载时运行和加载它

我建议制作一个组件，将组件放在您正在呈现的任何模板中（如果您只有一个页面，可以是

application.hbs

）并将Javascript放入组件的

didInsertElement

方法中

除此之外，我还将p5画布放在组件自己的元素中，以便组件正常运行（组件在其自己的元素之外渲染东西是很奇怪的，如果您导航到其他模板，您会希望正确清理它们）。这个

在您的组件中，它看起来像：

export default Component.extend({
  didInsertElement() {
   createCanvas(400,400);
   canvas.parent(this.element);
   background(200);
   fill(0);
   text('Enable mic and click the mouse to begin recording', 20, 20);
   ...etc...  
  }
})

```

此答案适用于1.13版以后的余烬应用程序，并于3.x版开始编写。Ember<3.x的版本需要在组件样板中使用较旧的导入语法

加载页面后应运行的代码最常见的位置是didInsertElement挂钩：

import Component from '@ember/component';

export default Component.extend({
  didInsertElement() {
    this._super(...arguments);
    console.log(p5) // this should print a function to the console
  }
});

还可以查看didRender，它可能更适合您的用例

您可以在中阅读更多关于不同组件生命周期挂钩使用的信息