Question

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

https://p5js.org/examples/sound-record-save-audio.html

我在index.html文件中包含了cdn脚本：

我不知道在Ember运行循环中如何/在哪里放置javascript以便运行并在页面加载时加载

Answer 1

我建议制作一个组件，将组件放在你正在呈现的任何模板中（如果你只有一个页面，可以是application.hbs）并将Javascript放入组件的didInsertElement方法中。 / p>

除此之外，我会将p5画布放在组件自己的Element中，这样组件就能正常运行（组件在自己的Element之外渲染东西很奇怪，你希望它们能够正确地清理它们如果你导航到其他模板）。 p5 docs say how to position the canvas。{{3}}。

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

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...  
  }
})

```

Answer 2

此答案适用于Ember应用程序版本1.13以后，并且是从3.x开始编写的。 Ember版本＆lt; 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，它可能更适合您的用例。

您可以在The Guides

中详细了解不同组件生命周期挂钩的用法

将p5js添加到Ember应用程序

2 个答案: