Ember.jsを使用して、ビューがレンダリングされた後にJSを実行するにはどうすればよいですか？

Question

EmberビューがDOMに挿入された後、関数を実行するにはどうすればよいですか？

これが私のユースケースです：ソート可能なjQueryUIを使用してソートできるようにしたいです。

Answer 1

「ビューの要素がDOMに挿入されたときに呼び出されます。この関数をオーバーライドして、ドキュメント本文に要素を必要とする設定を行う」ため、didInsertElementをオーバーライドする必要があります。

didInsertElementコールバック内で、this.$()を使用して、ビューの要素のjQueryオブジェクトを取得できます。

参照： https：//github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js

Answer 2

afterRenderメソッドを使用することもできます ジェネラコディセタグプレ

Answer 3

Ember 2.x：ビューは非推奨です。代わりにコンポーネントを使用してください

特定のことがいつ発生するかを知るには、コンポーネントのライフサイクルを理解する必要があります。

コンポーネントがレンダリングされ、再レンダリングされ、最終的に削除されると、Emberは、コンポーネントのライフサイクルの特定の時間にコードを実行できるライフサイクルフックを提供します。

https://guides.emberjs.com/v2。 6.0 / components / the-component-lifecycle /

一般的に、didInsertElementはサードパーティのライブラリと統合するのに最適な場所です。

このフックは2つのことを保証します

1. コンポーネントの要素が作成され、DOMに挿入されました。
2. コンポーネントの要素には、コンポーネントの$()メソッドを介してアクセスできます。

   属性が変更されるたびにJavaScriptを実行する必要があります

   didRenderフック内でコードを実行します。

   詳細については、上記のライフサイクルドキュメントをもう一度お読みください

Answer 4

Ember 3.13 から始めて、次のことができます。Glimmerから継承したコンポーネントを使用します。以下の例は、次のようになります。 ジェネラコディセタグプレ

これらのビュースタイルコンポーネントにはライフサイクルフックが直接ありません。代わりに、 render-を使用できます。関数をアタッチするための修飾子。モディファイアの非公式な紹介ここにあります

これの利点は、テンプレートの責任が何であり、どのようになるかが明確になることです。

これを試してみたい場合は、実行可能なコードサンドボックスを次に示します。 https://codesandbox.io/s/octane-starter-ftt8s >

Answer 5

ビューのdidInsertElementコールバックで必要なものをすべて起動する必要があります： ジェネラコディセタグプレ