Question

我现在被困在这里2天了，我真的希望你能帮助我。

我正在尝试使用这个主题，我在wrapbootstrap（https://wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR）上使用backboneJS和requireJS

所以，基本上，我有这个例子的文件结构：

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>

没有错误，一切都很完美。然后，我想要加载所有脚本

ACE-extra.min.js
jquery.min.js
bootstrap.min.js
ACE-elements.min.js
ace.min.js

按此顺序，juste就像模板一样。

所以，我在头部添加了这一行

<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>

所以，我真的不明白，如果有人有答案，我会很高兴。 Thansk！

Kai23

Answer 1

因此，事实证明这是你在ace.min.js文件中执行操作的顺序。要修复它，只需将包含ace.handle_side_menu的第二个jQuery函数移动到ace.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回调中的那个首先被点击。

Answer 2

老兄，这是巧合。我为我的项目使用了相同的主题，你可以查看我的html模板：

https://github.com/pjyong/chenxi/blob/master/src/ChenXi/MainBundle/Resources/views/Default/index.html.twig

和我的主要JS文件：

https://github.com/pjyong/chenxi/blob/master/web/app/js/main.js

如果您有更多问题，我会回答。

RequireJS加载我的JS文件，但在使用它们时会触发错误

2 个答案: