Подтвердить что ты не робот

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

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

Здесь мой прецедент: я хотел бы использовать jQuery UI sortable для сортировки.

4b9b3361

Ответ 1

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

Внутри обратного вызова didInsertElement вы можете использовать this.$(), чтобы получить объект jQuery для элемента вида.

Ссылка: https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js

Ответ 2

Вы также можете использовать метод afterRender

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

Ответ 3

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

MyEmberApp.PostsIndexView = Ember.View.extend({

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

});

Ответ 4

Ember 2.x: просмотр устарел, вместо этого используйте компонент

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

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

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

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

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

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

Вам нужно, чтобы JavaScript выполнялся всякий раз, когда изменяются атрибуты

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

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