4

ダウンロードしたテンプレートがあります。

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

Meteor で使用したいのですが、大きな問題があります

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

444行目の一番下で、正しい順序でロードされていません。ページが読み込まれると、この js ファイルで指定された 4 つの機能はいずれも機能しません。

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

すべての css、フォント、画像、および js ファイルがpublicフォルダーにあり、それらはすべて HTML で正しく参照されています。それらは、他の何よりも先にロードされるディレクトリにはありません。lib

DOMがロードされる前にスクリプトが何らかの形でロードされているためだと思います。そのため、適用するDOMがありません。

私が試したこと：

  • script.jstoの名前を変更し、main.js444 行目を<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 }

    しかし、これは信じられないほど、信じられないほど面倒で非効率的な方法のようです。コードではなく、個々のファイルの読み込み順序を指定する必要があります。このテンプレートには約 5 つの .js ファイルがあり、それらのコードを切り取ってすべてを 1 つの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 の準備が整うとすぐに関数が実行されます。

これをclient/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 のロード後にロードされるため、アニメーションが機能します。

于 2014-05-12T05:04:29.477 に答える
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 に答える