javascript - Ember.js 组件 didRender 变量范围

Question

我正在使用 Ember 组件的 didRender() Hook 来实现一些需要在 DOM 加载后运行的 JavaScript。例如:

didRender() {
  var signaturePad = new SignaturePad($("#sigElement"));
  signaturePad.clear();
}

这工作正常。但是，我需要从同一组件中的操作访问 signaturePad 变量，以使按钮正常运行。如:

actions: {
   clearSignature: function() {
     signaturePad.clear();
   }
}

不幸的是，我在组件的 didRender() Hook 中定义的变量似乎没有传递给 actions。

我如何能够从同一组件中的操作访问此变量？

Answer 1

如果你想在加载 DOM 后执行某些操作，你应该使用 didInsertElement 钩子(Hook)。

创建变量不会将其设置为在其他情况下使用的属性。

请像这样更改:

didInsertElement() {
  var signaturePad = new SignaturePad($("#sigElement"));
  signaturePad.clear();
  this.set('signaturePad', signaturePad);
}

actions: {
   clearSignature: function() {
     this.get('signaturePad').clear();
   }
}