4

我有一个我下载的模板：

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

我想在 Meteor 中使用它，但我遇到了重大问题

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

在第 444 行的底部没有按正确的顺序加载。当页面加载时，这个 js 文件中指定的 4 个函数都不起作用。

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

我的文件public夹中有所有的 css、字体、图像和 js 文件，它们都在 HTML 中正确引用。它们不在lib其他所有内容之前加载的目录中。

我认为这是因为脚本在加载 DOM 之前以某种方式加载，所以它没有 DOM 可以应用东西。

我尝试过的事情：

  • 当我更改名称并将第 444 行更改script.js为动画时，仍然无法正常工作。main.js<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函数中。

4

5 回答 5

3

您需要做的就是在模板呈现后加载 javascript。

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

如果您在 $(window).load() 或 $(document).ready() 中加载了脚本，请记住也将其取出。你也可以在 $getScript 的 promise 中运行它们。这是你的情况：

$.getScript('assets/js/script.js', function() {
      initNavbar();
      initPortfolio();
      initAnimations();
      initTwitterFeed();
      $(".loader .fading-line").fadeOut();
      $(".loader").fadeOut("slow");
});
于 2014-05-12T07:43:33.260 回答
3

以上答案都不适合我，所以我一直在破解，直到最后以下工作：

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 文件中。

于 2015-07-20T22:20:49.060 回答
2

感谢 imslavko 的回答！

http://docs.meteor.com/#meteor_startup

在服务器上，该函数将在服务器进程完成启动后立即运行。在客户端上，该函数将在 DOM 准备好后立即运行。

所以我把它放到我的客户端/视图/应用程序/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 加载之后加载，因此动画可以工作。

于 2014-05-12T05:04:29.477 回答
2

从这里很清楚：Meteor Docs

最好以对文件加载顺序不敏感的方式编写应用程序，例如使用 Meteor.startup 或将加载顺序敏感代码移动到包中，这样可以显式控制加载顺序它们的内容和它们相对于其他包的加载顺序。然而，有时应用程序中的加载顺序依赖性是不可避免的。

不使用特殊文件名和目录时：

子目录中的文件在父目录中的文件之前加载，因此最深的子目录中的文件首先加载，根目录中的文件最后加载。- 在目录中，文件按文件名的字母顺序加载。以下是控制文件加载顺序的特殊文件和目录名称的完整列表：

库

如上所述排序后，名为 lib 的目录下的所有文件都将在其他所有文件之前移动，并保留它们的顺序。

主要的。*

所有匹配 main.* 的文件都被移动到其他所有文件之后，保持它们的顺序。

于 2015-02-26T10:30:58.123 回答
0

我用过这个模式

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({

于 2016-12-09T06:53:37.063 回答