Семантический пользовательский интерфейс всплывает с Meteor

Question

Я пытаюсь использовать всплывающее окно Semantic с метеором

<a href="{{pathFor 'Movie_Info' _id=movie._id}}"><img src={{movie.HomePoster}} data-title="Title" data-content="Description"></a>


/*JS file*/
Template.Home_Page.events({

});

$('img')
    .popup({
      boundary: 'a',
    })
;

Но при наведении на изображение всплывающее окно не отображается ... Что я делаю не так?

Answer 1

В Blaze (движок рендеринга шаблонов по умолчанию в Meteor) вы используете отображение событий для прикрепления событий к вашим компонентам.

ШАБЛОН:

<a href="{{pathFor 'Movie_Info' _id=movie._id}}">
  <img src={{movie.HomePoster}} class="popup-target" data-title="Title" data-content="Description">
</a>

Обратите внимание, что я добавил class="popup-target" который будет действовать как селектор для нашего слушателя событий.

JS:

Template.Home_Page.events({
  'mouseover .popup-target' (event, templateInstance) {
    // trigger popup using jquery here
    // event.currentTarget is the source of the event
    // in our case the image
    $(event.currentTarget).popup({
      boundary: 'a',
    })
  }
});

Подробнее здесь:

http://blazejs.org/api/templates.html#Event-Maps