Ember.jsコンポーネントdidRender変数スコープ

Question

EmberコンポーネントのdidRender()フックを使用して、DOMのロード後に実行する必要のあるJavaScriptを実装しています。例：

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

これは正常です。しかし、ボタンを適切に機能させるには、同じコンポーネント内の自分のアクションから変数signaturePadにアクセスする必要があります。以下のような：

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

残念ながら、コンポーネントのdidRender()フックで定義された私の変数はactionsに通らないようです。

同じ変数内のアクションからこの変数にアクセスするにはどうすればよいですか？

Answer 1

DOMのロード直後に何かしたい場合は、didInsertElementフックを使用する必要があります。

変数を作成しても、別の状況で後で使用するためのプロパティとしてプロパティを設定していません。

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

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