Вызов держателя.js в Meteor

Я новичок в Meteor и пытаюсь заставить холдер.js работать в фреймворке. При обновлении работает, но при переходе с одного маршрута на другой ломается.

В документации просто говорится "Поскольку Meteor по умолчанию включает скрипты в начало документа. , DOM может быть не полностью доступен при вызове Holder. По этой причине поместите код, связанный с Holder, в прослушиватель событий «DOM ready».

Я предполагаю, что мне нужен обратный вызов Template.foo.onRendered, но не знаю, как его отформатировать. Вот HTML:

<img class="holder" src="holder.js/120x120">

И вот обратный вызов, который я добавил в файл .js:

Template.contactSingle.onRendered(function() {
  this.$('.holder').Holder.run();
});

Опять же, изображенияholder.js появляются при обновлении, но я не могу заставить их отображаться при переходе с одной страницы на другую. Я использую FlowRouter для маршрутизации.

Я уверен, что это что-то простое. Любая помощь приветствуется!


meteor holder.js flow-router
person Allen Fuller    schedule 03.12.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Измените свой код с:

Template.contactSingle.onRendered(function() {
  this.$('.holder').Holder.run();
});

to:

Template.contactSingle.onRendered(function() {
  Holder.run({images: document.querySelectorAll('.holder')});
});

Очевидно, вы не хотите делать дорогостоящие document.querySelectorAll('.holder'). Если вы можете уменьшить этот шаблон до своего шаблона, используя класс из его оболочки.

Например:

Шаблон:

<template name="singlePost">
  <div class="single-post">
    <h2>This is the singlePost area.</h2>
    <img class='holder' src="holder.js/300x200">
  </div>
</template>

и onRendered

  Template.singlePost.onRendered(function() {
    Holder.run({
      images: document.querySelectorAll('.single-post .holder')
    });
  });
person Azizur Rahman    schedule 03.12.2015
comment
Спасибо @Azizur! Я знал, что использую Holder.run неправильно, просто не знал, как правильно его использовать. - person Allen Fuller; 04.12.2015