Templates 如何在加载模板后立即触发在画布上绘制的操作？

我想在加载模板后立即在模板的画布上绘制，所以我想我需要一个合适的钩子（事件）来完成它，但我找不到

我阅读了的答案，并尝试使用“setupController”事件来执行此操作，但它不起作用

模板.hbs

<canvas id="lyric-editor" width="200" height="200"/>

import Ember from 'ember';
export default Ember.Route.extend({
  setupController: function() {
    var canvas = document.getElementById('lyric-editor');
    console.log(canvas:" + canvas); 
    // the result is null, it means the template is not loaded at this time.
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'white'; // Color of the bars
    ctx.fillRect(50, 50, 40, 40);
  }

在Ember.route类中有beforeModel方法和afterModel方法，因此我期望类似于posterempalteload方法

---

任何提示都将不胜感激，提前感谢

我将创建一个组件（在终端中使用

ember g component canvas组件），并在组件中使用didInsertElement钩子

因此，在画布组件中（或您选择的任何名称）

我绝对建议阅读我将创建一个组件（在终端中使用
ember g component canvas组件），并在组件中使用didInsertElement钩子

因此，在画布组件中（或您选择的任何名称）

我绝对建议您通读
谢谢您的快速回答，Iguchi。它工作完美，链接非常有用，我会仔细阅读。谢谢你的快速回答，Iguchi。它工作完美，链接非常有用，我会仔细阅读。
didInsertElement() {
   this._super(...arguments);

   const canvas = this.$();
   console.log(canvas:" + canvas); 
}