Как интегрировать плагины jQuery в приложение Ember

 {{yield}}
<div class="jquerypic" >
  <div class="fullversion-container">
    <img src="http://lorempixel.com/640/480/nature/1" alt="" class="full-version" >
  </div>
  <div class="thumbnails">
    <img src="http://lorempixel.com/640/480/nature/1" alt="" class="thumbnail">
    <img src="http://lorempixel.com/640/480/nature/2" alt="" class="thumbnail">
    <img src="http://lorempixel.com/640/480/nature/3" alt="" class="thumbnail">
    <img src="http://lorempixel.com/640/480/nature/4" alt="" class="thumbnail">
    <img src="http://lorempixel.com/640/480/nature/5" alt="" class="thumbnail">
  </div>
</div>

В файле класса добавьте функцию didInsertElement

 import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement: function () {

  }
});

Сейчас мы находимся в критической точке. В jQuery инициализация плагина обычно происходит внутри функции document.ready

 $(document).ready(function(){
  //Initialize plugin here
});

Вместо этого с компонентами Ember эта инициализация происходит в специальной функции с именем didInsertElement Эта функция вызывается, когда компонент готов и успешно вставлен в DOM. Оборачивая наш код внутри этой функции, мы можем гарантировать две вещи:

• Плагин инициализируется только для этого компонента
• Плагин не будет мешать другим компонентам

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

 ember generate template index

Затем добавьте следующий код в шаблон для использования компонента:

 {{jquery-pic}}

После этого загрузите сервер Ember с

 ember serve

С помощью этой команды сервер запускается. Откройте выбранный браузер и получите доступ к URL-адресу, указанному в интерфейсе командной строки. Вы должны увидеть список миниатюр под предварительным просмотром изображения. Обратите внимание, что при нажатии на миниатюру ничего не происходит. Это происходит потому, что мы не подключили обработчики событий плагина. Давай сделаем это!

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

Инициализация компонента Ember

Чтобы показать проблему, давайте начнем с добавления следующего кода в функцию didInsertElement

 $(".jquerypic").jquerypic();

Если вы не используете Ember, вы обычно инициализируете плагин. Теперь проверьте окно браузера и нажмите на миниатюры. Вы должны увидеть, что они загружены в просмотрщик больших изображений, как и предполагалось. Может показаться, что все работает нормально, верно? Что ж, проверьте, что происходит, когда мы добавляем второй экземпляр компонента. Сделайте это, добавив еще одну строку в шаблон индекса, содержащий тот же код, который я показывал ранее. Итак, ваш шаблон должен выглядеть так:

 {{jquery-pic}}
{{jquery-pic}}

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

Чтобы решить эту проблему, нам нужно немного изменить наш инициализатор. Правильное заявление об использовании сообщается ниже:

 this.$(".jquerypic").jquerypic();

Разница в том, что мы сейчас используем this.$$ Два экземпляра компонента теперь должны вести себя правильно. Нажатие на миниатюры для одного экземпляра не должно влиять на другой компонент.

 willDestroyElement: function () {
  this.get('jquerypic').stop();
}

 didInsertElement: function () {
  var jquerypic = this.$(".jquerypic").jquerypic();
  this.set('jquerypic', jquerypic);
},

 actions: {
  stopEvents: function () {
    this.get('jquerypic').stop();
  }
}

 <p {{action "stopEvents"}} >
  Stop Events
</p>