2016-06-21 2 views
1

Meteorを使用してダッシュボードを構築していますが、http://themeforest.net/からデザインテンプレート(HTML)を購入しましたが、このデザインテンプレートをMeteor Appに正しく組み込む方法がわかりません。Meteor Appにスタイルシートとスクリプトを正しくロードする方法。

問題はかなり簡単です。デザインテンプレートが正しく機能するために必要なCSSファイルとjsファイルのリストを読み込もうとしていますが、問題があります。私は、ファイルが正しい順序でロードされていないと考えており、これはエラーを引き起こしています。たとえば、jqueryプラグインの半分が機能していない場合、これはjqueryファイル自体の前にプラグインファイルがロードされている場合に発生する可能性があります。私はネットワーク上でファイルがロードされているのを見ることができますが、例えば$ .sortable関数は利用できません。

正しい順序でロードされていることを確認するために、スタイルシートとjavascriptファイルをロードする正しい方法は何ですか?

最初の問題は、これらのファイルをどこに配置するのか正確にはわかりませんでした。これらのファイルは私のアプリケーションのロジックには必要ではないので、ディレクトリクライアントに入れたくありませんでした。プラス私はそれらをクライアントに配置するとMeteorは自動的にそれらをロードし、ロードされた順番を制御できません。

したがって、すべてのテンプレートデザインの依存関係ファイルをPublicフォルダに置き、 。

1.クライアント/ main.htmlをファイル内のすべてのファイルをインポートする:

<head> 
    <meta charset="UTF-8"> 
    <title>ETL Web-Admin</title> 
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/> 
    <meta content="" name="description"/> 
    <meta content="" name="author"/> 


    <!-- ================== BEGIN BASE CSS STYLE ================== --> 
    <link href="/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/> 
    ... 
    <!-- ================== END BASE CSS STYLE ================== --> 


    <!-- ================== BEGIN BASE JS ================== --> 
    <script src="/plugins/jquery/jquery-1.9.1.min.js"></script> 
    ... 
    <script src="/plugins/jquery-cookie/jquery.cookie.js"></script> 
    <!-- ================== END BASE JS ================== --> 

</head> 

2内のすべてのファイルをインポートする

私は、ファイルをロードするには、次の試してみましたクライアント/ main.jsファイル:上に

Meteor.startup(function() { 
}); 



// <!-- ================== BEGIN BASE CSS STYLE ================== --> 
    import "../public/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" 
    ... 
// <!-- ================== END BASE CSS STYLE ================== --> 

// <!-- ================== BEGIN BASE JS ================== --> 
    import "../public/plugins/jquery/jquery-1.9.1.min.js" 
    ... 
//  <!-- ================== END BASE JS ================== --> 

どちらの方法でも、同じ問題を与えます依存関係が正しくロードされません。

すべての要素がロードされ、(jQueryの面で)文書は、私は2つの機能を呼び出す必要があります準備ができている最後のデザインテンプレートを初期化するために、:

それは行うことができ、従来のHTML形式で
App.init() 
// and 
Dashboard.init() 

<script> 
     // when document is ready, do something 
     $(document).ready(function() { 
      App.init(); 
      Dashboard.init(); 
     }); 
</script> 

メテオールではどうすればよいですか?

答えて

0
クライアントでは、CSSでのプロジェクト流星ためsctructure、あなたのファイルを使用するには>スタイルシート 、あなたがクライアントでjQueryの

> youNameTemplate.js

Template.youNameTemplate.rendered = function() { 
    App.init(); 
    Dashboard.init(); 
} 
+0

uはあなたのアプリケーションを開発し、過去に取得し、それはそれは生きて置きますCDN上のすべてのアセットファイル(CSSおよびイメージ)のホストに推奨 – SlartyBartfast

関連する問題