4

ここで 2 日間立ち往生しています。助けていただければ幸いです。

バックボーンJSとrequireJSを使用して、wrapbootstrap（https://wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR）で購入したこのテーマを使用しようとしています

したがって、基本的に、例のファイル構造は次のとおりです。

index.html
app/
 |___ js/
 |____ main.js
assets/
 |___ js
       |___ ace.min.js
       |___ ace-extra.min.js
       |___ ace-elements.min.js
       |___ bootstrap.min.js
       |___ jquery.min.js
libs
 |___ require
       |___ require.js

したがって、この基本的なテンプレートを使用すると、次のようになります。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Blank Page - Ace Admin</title>

    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!--basic styles-->

    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="assets/css/font-awesome.min.css" />

    <!--[if IE 7]>
              <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
            <![endif]-->

    <!--page specific plugin styles-->

    <!--fonts-->

    <link rel="stylesheet" href="assets/css/ace-fonts.css" />

    <!--ace styles-->

    <link rel="stylesheet" href="assets/css/ace.min.css" />
    <link rel="stylesheet" href="assets/css/ace-responsive.min.css" />
    <link rel="stylesheet" href="assets/css/ace-skins.min.css" />

    <!--[if lte IE 8]>
              <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
            <![endif]-->

    <!--inline styles related to this page-->

    <!--ace settings handler-->

    <script src="assets/js/ace-extra.min.js"></script>

</head>

<body>

    <!--basic scripts-->

    <script src='assets/js/jquery-2.0.3.min.js'></script>
    <script src="assets/js/bootstrap.min.js"></script>

    <!--page specific plugin scripts-->

    <!--ace scripts-->

    <script src="assets/js/ace-elements.min.js"></script>
    <script src="assets/js/ace.min.js"></script>
</body>

</html>

エラーはありません。すべて完全に機能します。次に、すべてのスクリプトをロードしたい

  1. ace-extra.min.js
  2. jquery.min.js
  3. bootstrap.min.js
  4. ace-elements.min.js
  5. ace.min.js

この順番でテンプレ通りに。

だから、頭にこの行を追加します

<script async data-main="app/main" src="libs/require/require.js"></script>

そして、次のように main.js を作成しました:

require.config({
    // The shim config allows us to configure dependencies for
    // scripts that do not call define() to register a module
    shim: {
        bootstrap: {
            deps: ['jquery']
        },
        ace: {
            deps: ['aceElement']
        },
        aceElement: {
            deps: ['aceExtra', 'bootstrap', 'jquery']
        }
    },
    paths: {
        jquery: '../assets/js/uncompressed/jquery-2.0.3',
        bootstrap: '../assets/js/uncompressed/bootstrap',
        ace: '../assets/js/uncompressed/ace',
        aceExtra: '../assets/js/uncompressed/ace-extra',
        aceElement: '../assets/js/uncompressed/ace-elements'
    }
});
require([
    'jquery',
    'bootstrap',
    'ace'
], function() {

});

すべてのスクリプトを削除したので、次のようになりました。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Blank Page - Ace Admin</title>

        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!--basic styles-->

        <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
        <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="assets/css/font-awesome.min.css" />

        <!--[if IE 7]>
          <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
        <![endif]-->

        <!--page specific plugin styles-->

        <!--fonts-->

        <link rel="stylesheet" href="assets/css/ace-fonts.css" />

        <!--ace styles-->

        <link rel="stylesheet" href="assets/css/ace.min.css" />
        <link rel="stylesheet" href="assets/css/ace-responsive.min.css" />
        <link rel="stylesheet" href="assets/css/ace-skins.min.css" />

        <!--[if lte IE 8]>
          <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
        <![endif]-->

        <!--inline styles related to this page-->

        <!--ace settings handler-->
    <script async data-main="app/main" src="libs/require/require.js"></script>
    </head>

    <body>
              ...
    </body>
</html>

しかし、ここでエラーが発生しました

     Uncaught TypeError: Object #<Object> has no method 'handle_side_menu'

ここから来ます：

jQuery(function($) {
    //ace.click_event defined in ace-elements.js
    ace.handle_side_menu(jQuery);

    ace.enable_search_ahead(jQuery);    

    ace.general_things(jQuery);//and settings

    ace.widget_boxes(jQuery);

    /**
    //make sidebar scrollbar when it is fixed and some parts of it is out of view
    //>> you should include jquery-ui and slimscroll javascript files in your file
    //>> you can call this function when sidebar is clicked to be fixed
    $('.nav-list').slimScroll({
        height: '400px',
        distance:0,
        size : '6px'
    });
    */
});

この生成されたコードにもかかわらず、(Chrome 開発ツール):

    <html lang="en"><head>
        <meta charset="utf-8">
        <title>Blank Page - Ace Admin</title>

        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!--basic styles-->

        <link href="assets/css/bootstrap.min.css" rel="stylesheet">
        <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
        <link rel="stylesheet" href="assets/css/font-awesome.min.css">

        <!--[if IE 7]>
          <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
        <![endif]-->

        <!--page specific plugin styles-->

        <!--fonts-->

        <link rel="stylesheet" href="assets/css/ace-fonts.css">

        <!--ace styles-->

        <link rel="stylesheet" href="assets/css/ace.min.css">
        <link rel="stylesheet" href="assets/css/ace-responsive.min.css">
        <link rel="stylesheet" href="assets/css/ace-skins.min.css">

        <!--[if lte IE 8]>
          <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
        <![endif]-->

        <!--inline styles related to this page-->

        <!--ace settings handler-->
        <script async="" data-main="app/main" src="libs/require/require.js"></script>
    <script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="app/main.js">
    </script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="jquery" src="app/../assets/js/uncompressed/jquery-2.0.3.js">
    </script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="bootstrap" src="app/../assets/js/uncompressed/bootstrap.js">
    </script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="aceExtra" src="app/../assets/js/uncompressed/ace-extra.js">
    </script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="aceElement" src="app/../assets/js/uncompressed/ace-elements.js">
    </script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="ace" src="app/../assets/js/uncompressed/ace.js">
    </script></head>

    <body style=""></body></html>

よくわからないので、どなたか回答いただけると嬉しいです。ありがとう！

カイ23

4

2 に答える 2

3

つまり、ace.min.js ファイルで実行している順序であることがわかります。これを修正するには、 を含む 2 番目の jQuery 関数をace.handle_side_menuace.min.js ファイルの末尾に移動します。ちょっとたまたまですが、これが理由です。

require が main.js ファイルをロードすると、js ファイルの非同期ロードが開始されます。これにより、ページの残りの部分と DOM をロードする機会が与えられます (これこそが、require.js を好む理由です)。ace.min.js ファイルが読み込まれるまでに、ウィンドウはすでにonReadyイベントを通知しています。だから、あなたが持っているあなたのaceファイルで

jQuery(function($) {
    ace.handle_side_menu(jQuery);

jQuery は、DOM の準備ができていることをすぐに認識し、渡された関数 (function($)パーツ) をすぐに呼び出します。この関数はhandle_side_menu、ace オブジェクトにアタッチされる前に実行を開始します。Chrome デバッガー ツールを使用して、 がある両方の場所にブレークポイントを配置するとhandle_side_menu、jQuery コールバック内の 1 つが最初にヒットすることがわかります。

于 2013-08-21T22:43:34.013 に答える