web-dev-qa-db-ja.com

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

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

これが私のユースケースです：ソートを可能にするためにjQuery UI sortableを使用したいと思います。

ember.js
43
Marc Hughes

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

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

リファレンス： https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js

64
Roy Daniels

AfterRenderメソッドも使用できます

didInsertElement: function () {
Ember.run.scheduleOnce('afterRender', this, function () {
     //Put your code here what you want to do after render of a view
    });
}
3
Jyoti

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

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

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

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

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

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

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

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

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

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

1
Lorem Ipsum Dolor

Ember 3.1 から始めて、Glimmerから継承するコンポーネントを使用できます。以下の例は、その例を示しています。

import Component from '@glimmer/component';
import { action } from '@ember/object';

/* global jQuery */

export default class MyOctaneComponent extends Component {
  @action configureSorting(element) {
    jQuery(element).sortable();
  }
}

<div {{did-insert this.configureSorting}}>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

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

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

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

1
NullVoxPopuli

ビューのdidInsertElementコールバックで必要なものを起動する必要があります。

MyEmberApp.PostsIndexView = Ember.View.extend({

  didInsertElement: function(){
    // 'this' refers to the view's template element.
    this.$('table.has-datatable').DataTable();
  }

});
0
sergserg