Как мне запустить JS после рендеринга представления, используя Ember.js?
-
28-10-2019 - |
Вопрос
Как запустить функцию после того, как Ember View вставлен в DOM?
Вот мой пример использования: я хотел бы использовать jQuery UI с возможностью сортировки, чтобы разрешить сортировку.
Решение
Вам необходимо переопределить код didInsertElement
, поскольку он «вызывается, когда элемент представления был вставлен в модель DOM. Переопределите эту функцию, чтобы выполнить любую настройку, требующую элемента в теле документа».
Внутри обратного вызова didInsertElement
вы можете использовать this.$()
для получения объекта jQuery для элемента представления.
Ссылка: https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js
Другие советы
Вы также можете использовать метод afterRender
родовое словоEmber 2.x: View устарел, используйте вместо него компонент
Вы должны понимать жизненный цикл компонента, чтобы знать, когда что-то происходит.
<цитата>По мере рендеринга, повторного рендеринга и окончательного удаления компонентов Ember предоставляет хуки жизненного цикла, позволяющие запускать код в определенные моменты жизни компонента.
https://guides.emberjs.com/v2. 6.0 / компоненты / жизненный цикл-компонента /
Как правило, didInsertElement
- отличное место для интеграции со сторонними библиотеками.
Этот хук гарантирует две (2) вещи
- Элемент компонента был создан и вставлен в DOM.
- Элемент компонента доступен через метод
$()
компонента.
Вам нужен JavaScript для запуска при изменении атрибутов
Запустите свой код внутри хука didRender
.
Еще раз, пожалуйста, прочтите документацию по жизненному циклу выше для получения дополнительной информации
Начиная с Ember 3.13 , вы можетеиспользуйте компоненты, унаследованные от Glimmer, и этот пример ниже показывает, как это может выглядеть:
родовое словоЭти компоненты стиля представления напрямую не имеют перехватчиков жизненного цикла, вместо этого вы можете использовать render-модификаторы для присоединения функции.Неофициальное введение в модификаторы можно найти здесь
Преимущество этого в том, что становится понятнее, каковы обязанности шаблона и чем они становятся.
Вот исполняемый файлcodeandbox, если вы хотите поиграть с этим: https://codesandbox.io/s/octane-starter-ftt8s
Вам нужно активировать все, что вы хотите, в обратном вызове didInsertElement
в вашем представлении: