В Meteor JS, как управлять порядком загрузки Javascript относительно порядка загрузки DOM? Для анимации

Question

У меня есть шаблон, который я скачал:

http://halibegic.com/projects/merlin/

Я хочу использовать его в Метеоре, и у меня возникли серьезные проблемы с

<script src="assets/js/script.js"></script>

внизу строки 444 не загружается в правильном порядке. Когда страница загружается, ни одна из 4 функций, указанных в этом файле js, не работает.

initNavbar(); initPortfolio(); initAnimations(); initTwitterFeed();

У меня есть все файлы CSS, шрифты, изображения и JS в моем public папку, и все они правильно указаны в HTML. Они не в lib каталог, который загружается раньше всего.

Я думаю, это потому, что скрипт каким-то образом загружается до загрузки DOM, поэтому у него нет DOM, к которому можно что-то применить.

Вещи, которые я пробовал:

• Когда я меняю имя script.js в main.js и измените строку 444 на <script src="assets/js/main.js"></script> анимации все еще не работают.

• Когда я добавляю это в файл скрипта, он все равно загружается неправильно:

  $(document).ready(function () { initNavbar(); initPortfolio(); initAnimations(); initTwitterFeed(); });

• я могу сделать

  Template.layout.rendered/created = function () { add in all the function code and call them here }

  но это кажется невероятно, НЕВЕРОЯТНО грязным и неэффективным способом сделать это. Мне нужно указать порядок загрузки отдельных файлов, а не код. У меня есть около пяти файлов.js в этом шаблоне, и я не хочу вырезать их код и вставить все это в один Template.layout.rendered/created функция.

Answer 1

Все, что вам нужно сделать, это загрузить javascript после рендеринга шаблона.

Template.yourLayout.created = function() {
  $('head').append('<script type="text/javascript" src="assets/js/script.js">');
}

Если у вас есть скрипты, загруженные в $ (window).load () или $ (document).ready (), не забывайте также об этом. Вы также можете запустить их в обещании $getScript. Это ваш случай:

$.getScript('assets/js/script.js', function() {
      initNavbar();
      initPortfolio();
      initAnimations();
      initTwitterFeed();
      $(".loader .fading-line").fadeOut();
      $(".loader").fadeOut("slow");
});

Answer 2

Ни один из приведенных выше ответов не работал для меня, поэтому я продолжал взламывать, пока, наконец, не сработало следующее:

Template.layout.rendered = function() {
  // hack: these third party header animation scripts must be inserted at the bottom of body
  $('body').append('<script type="text/javascript" src="assets/js/classie-main.js">');
  $('body').append('<script type="text/javascript" src="assets/js/cbpAnimatedHeader.js">');
};

Я положил это в свой файл layout.js.

Answer 3

Спасибо Имславко за ответ!

http://docs.meteor.com/

На сервере функция будет запущена, как только процесс сервера завершится. На клиенте функция будет запущена, как только DOM будет готов.

Поэтому я положил это в мой клиент /views/application/layout.js. Он использует jQuery $.getScript, поэтому вы должны убедиться, что jQuery загружен, прежде чем пытаться это:

Meteor.startup( function () {
  $.getScript("assets/js/jquery.min.js");
  $.getScript("assets/js/bootstrap.min.js");
  $.getScript("assets/js/isotope.pkgd.min.js");
  $.getScript("assets/js/imagesloaded.min.js");
  $.getScript("assets/js/jquery.scrollTo.min.js");
  $.getScript("assets/js/jquery.nav.min.js");
  $.getScript("assets/js/jquery.appear.min.js");
  $.getScript("assets/js/twitterFetcher.min.js");
  $.getScript("assets/js/script.js");
});

Таким образом, все эти файлы теперь будут загружаться ПОСЛЕ загрузки DOM, и, следовательно, анимация работает.

Answer 4

Отсюда ясно: Meteor Docs

Лучше всего написать приложение так, чтобы оно не зависело от порядка загрузки файлов, например, с помощью Meteor.startup или путем перемещения кода, чувствительного к порядку загрузки, в пакеты, которые могут явно контролировать порядок загрузки их содержимого и порядка их загрузки по отношению к другим пакетам. Однако иногда зависимости порядка загрузки в вашем приложении неизбежны.

Когда не используются специальные имена файлов и каталогов:

Файлы в подкаталогах загружаются до файлов в родительских каталогах, поэтому файлы в самом глубоком подкаталоге загружаются первыми, а файлы в корневом каталоге загружаются последними. - Внутри каталога файлы загружаются в алфавитном порядке по имени файла. Ниже приведен полный список специальных имен файлов и каталогов, которые контролируют порядок загрузки файлов:

Lib

После сортировки, как описано выше, все файлы в каталогах с именем lib перемещаются перед всем остальным, сохраняя их порядок.

главный.*

Все файлы, соответствующие main.*, Перемещаются после всего остального, сохраняя свой порядок.

Answer 5

Я использовал этот шаблон

Template.layout.created = function() {
    var jsLibs = [
        'vendors/Flot/jquery.flot.js',
        'vendors/Flot/jquery.flot.pie.js',
        'vendors/Flot/jquery.flot.pie.js',
        'vendors/Flot/jquery.flot.pie.js',
        'vendors/Flot/jquery.flot.pie.js',
        'vendors/Flot/jquery.flot.pie.js',
        'vendors/Flot/jquery.flot.pie.js',
        'vendors/Flot/jquery.flot.pie.js',
        'vendors/Flot/jquery.flot.time.js',
        'vendors/Flot/jquery.flot.stack.js',
        'vendors/Flot/jquery.flot.resize.js',
        'js/flot/jquery.flot.orderBars.js',
        'js/flot/curvedLines.js',
        'js/flot/date.js',
        'js/flot/jquery.flot.spline.js',
        'js/flot/curvedLines.js',

        'vendors/bootstrap/dist/js/bootstrap.min.js',
        'vendors/bootstrap/dist/js/bootstrap.min.js',
        'vendors/fastclick/lib/fastclick.js',
        'vendors/nprogress/nprogress.js',
        'vendors/Chart.js/dist/Chart.min.js',
        'vendors/bernii/gauge.js/dist/gauge.min.js',
        'vendors/bootstrap-progressbar/bootstrap-progressbar.min.js',
        'vendors/iCheck/icheck.min.js',
        'vendors/skycons/skycons.js',
        'js/maps/jquery-jvectormap-2.0.3.min.js',
        'js/moment/moment.min.js',
        'js/datepicker/daterangepicker.js',
        'build/js/custom.min.js',
        'js/maps/jquery-jvectormap-world-mill-en.js',
        'js/maps/jquery-jvectormap-us-aea-en.js',
        'js/maps/gdp-data.js'
    ];

    jsLibs.forEach((lib) => {
        $('head').append(`<script type="text/javascript" src="${lib}">`);
    });
}

Затем переместите все $(document).ready() призывает в Template.layout.onRendered и click события в Template.layout.events({