11

MeteorJSアプリケーションで使用したいhttps://wrapbootstrap.com/のBootstrapテーマがあります。問題は、次のようなスクリプトタグがあることです。

<!--[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.jsMeteorJSでは動作しませんReferenceError。Meteorの外では、問題なく動作します。

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

後で編集：

Bootstrapテンプレートにlib/main.jsは、最後にインポートされたjavascriptファイルであるファイルがあります。それでも、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;
}

成功しませんでした。

4

1 に答える 1

7

これらの外部テーマは、流星に含まれるデフォルトのブートストラップと互換性がない可能性があるため、流星のブートストラップ パッケージを削除する必要があります。

デフォルトのブートストラップを削除します:

meteor remove bootstrap

テーマを追加します:

css ファイルをプロジェクトの css ディレクトリに配置します。/client/css

テーマの JavaScript ファイルを配置します。/client/lib

スクリプト タグやそれらのリンクなどについて心配する必要はありません。meteor がすべてを処理する必要があります。

また

Meteor にはデフォルトで JQuery が含まれているため、プロジェクトに含めることを心配する必要はありません。何らかの奇妙な理由で流星プロジェクトを使用している場合に jquery を追加するには、次のようにします。

meteor add jquery

外部 API

例: FB/Google Mapis API/トラッキング スクリプト。<head>通常どおり、html ファイルのセクションに追加します。

うまくいけば、このクールなすべてを見つけることができます!!

于 2013-03-03T10:04:16.143 に答える