2013-03-03 13 views
11

私はMeteorJSアプリケーションで使用したいブートストラップテーマhttps://wrapbootstrap.com/を持っています。問題は、スクリプトタグがあります:BootstrapテンプレートをMeteorJSに追加

<!--[if !lte IE 6]><!--> 
    <!-- Link to Google CDN's jQuery + jQueryUI; fall back to local --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/libs/jquery.min.js"><\/script>')</script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    <script>window.jQuery.ui || document.write('<script src="js/libs/jquery.ui.min.js"><\/script>')</script> 

    script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></scrip> 
                        <!-- RECOMMENDED: For (IE6 - IE8) CSS3 pseudo-classes and attribute selectors --> 
    <!--[if lt IE 9]> 
     <script src="js/include/selectivizr.min.js"></script>     
    <![endif]--> 

    <script src="js/libs/jquery.ui.touch-punch.min.js"></script>    <!-- REQUIRED: A small hack that enables the use of touch events on mobile --> 

MeteorJSに追加すると機能しません。私はタグがうまくいかないことを知っていますが、この設計されたページをMeteorJSにどうやって変換しますか?

その後編集:

私は上記のscript src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>を追加しました。上記のスクリプトはすべて<body>に追加されています。 google.mapsライブラリはlib/main.jsで使用され、ReferenceErrorが生成されるため、MeteorJSでは機能しません。流星の外でそれはうまく動作します。

ブートストラップテンプレートからGoogleマップのスクリプトを追加する方法についてのアイデアはありますか?

その後編集:

ブートストラップ・テンプレートが最後にインポートするJavaScriptファイルですlib/main.jsファイルを持っています。それにもかかわらず、Meteorに追加すると、実行されているように見えますが、その影響はUIでは表示されません。たとえば、この行$(".chzn-select").select2();を実行しますが、コンソールから実行するときだけ、UIの変更が表示されます。このファイルはMeteorによって最後にロードされます。私も試しました

function load_scripts() { 
var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "lib/main.js"; 
    document.body.appendChild(script); 
} 

if (Meteor.is_client) { 
    window.onload = load_scripts; 
} 

成功しません。あなたは流星のブートストラップパッケージを削除する必要がありますので

答えて

7

これらの外部のテーマは、デフォルトのブートストラップと互換性がないかもしれませんが、流星に含まれている:ブートストラップ

削除デフォルト:

meteor remove bootstrap 

を自分のテーマを追加します。

あなたのcssファイルをプロジェクトのcssディレクトリ、たとえば/client/css

に配置します

置きスクリプトタグを心配し、またはそれらか何かのいずれかをリンクしないでください/client/lib

内のJavaScriptファイルテーマは、流星は、そのすべての世話をする必要があります。

また

プロジェクトでそれを含めて心配する必要はありませんので流星は、デフォルトではJQueryを含んでいます。いくつかの奇妙な理由のためにあなたがしている場合はjqueryのを追加するには流星プロジェクトは、それが使用していない可能性があります。

meteor add jquery 

外部アピス

例えばFB/GoogleのMapis API /トラッキングスクリプト。通常どおり、htmlファイルの<head>セクションに追加してください。

このすべてがうまくいけばうれしいですね!

+0

私はそれが本当に涼しい見つける:)あなたの答えをありがとう、それは部分的に私を助けた。さて、私はGoogle Mapsのスクリプトに悩まされています - あなたは更新された質問を見てみることができます。 –

+0

あなたのhtmlファイルの ''セクションにgoogle maps apiを追加してください – Akshat

+0

ありがとう、Akshat! –

関連する問題