Блог

Как мне выполнить нижеприведенное с помощью Meteor Blaze и / или почему это не сработает?

Код делает / не делает то, что написано ниже

 // client...

$(document).ready(function () {
  console.log("this logs...");
  $('a.external').each(function () {
    console.log("this doesn't log");
    $(this).attr('title', 'External Link');
  });
});
  

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

К счастью, это очень просто!

Если ваш шаблон такой

 <template name="hello">
    <a href="https://servicelocale.com/" class="external">Link</a>
</template>
  

Затем вы можете использовать выполненный обратный вызов:

 Template.hello.rendered = function() {
    this.$('a.external').each(function () {
        $(this).attr('title', 'External Link');
    });
}
  

Я также использовал this.$ вместо $ в отображаемом обратном вызове. Это полезно, потому что он просматривается только в hello шаблоне, а не повсюду. Таким образом, вы можете иметь <a class="external" на своей странице, но в другом шаблоне, и у него не будет добавлен атрибут title.

Вы также можете использовать $ вместо этого здесь.