Как мне запустить JS после рендеринга представления, используя Ember.js?

Question

Как запустить функцию после того, как Ember View вставлен в DOM?

Вот мой пример использования: я хотел бы использовать jQuery UI с возможностью сортировки, чтобы разрешить сортировку.

Answer 1

Вам необходимо переопределить код didInsertElement, поскольку он «вызывается, когда элемент представления был вставлен в модель DOM. Переопределите эту функцию, чтобы выполнить любую настройку, требующую элемента в теле документа».

Внутри обратного вызова 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: View устарел, используйте вместо него компонент

Вы должны понимать жизненный цикл компонента, чтобы знать, когда что-то происходит.

<цитата>

По мере рендеринга, повторного рендеринга и окончательного удаления компонентов Ember предоставляет хуки жизненного цикла, позволяющие запускать код в определенные моменты жизни компонента.

https://guides.emberjs.com/v2. 6.0 / компоненты / жизненный цикл-компонента /

Как правило, didInsertElement - отличное место для интеграции со сторонними библиотеками.

Этот хук гарантирует две (2) вещи

1. Элемент компонента был создан и вставлен в DOM.
2. Элемент компонента доступен через метод $() компонента.

Вам нужен JavaScript для запуска при изменении атрибутов

Запустите свой код внутри хука didRender.

Еще раз, пожалуйста, прочтите документацию по жизненному циклу выше для получения дополнительной информации

Answer 4

Начиная с Ember 3.13 , вы можетеиспользуйте компоненты, унаследованные от Glimmer, и этот пример ниже показывает, как это может выглядеть:

родовое слово

Эти компоненты стиля представления напрямую не имеют перехватчиков жизненного цикла, вместо этого вы можете использовать render-модификаторы для присоединения функции.Неофициальное введение в модификаторы можно найти здесь

Преимущество этого в том, что становится понятнее, каковы обязанности шаблона и чем они становятся.

Вот исполняемый файлcodeandbox, если вы хотите поиграть с этим: https://codesandbox.io/s/octane-starter-ftt8s

Answer 5

Вам нужно активировать все, что вы хотите, в обратном вызове didInsertElement в вашем представлении:

родовое слово