Bootstrap.js 与 require.js 冲突并禁用导航栏下拉菜单

Bootstrap.js conflicts with require.js and disables Navbar dropdown

我在 Django 网站上工作,所以我有一个 base.html 包含我所有常用的东西并将其扩展到我需要的页面

整个站点使用的常用脚本在我的base.html:

<script src="/static/js/libs/jquery/jquery.js"></script>
<script src="/static/js/libs/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<script src="/static/js/libs/bs3/bootstrap.min.js"></script>


我的 dashboard.html extends base.html ,我使用 require.js only 作为 dashboard.html 并且它在最底部包含以下内容:

<script data-main="/static/js/dashboard/main" src="/static/js/libs/require/require.js" type="application/javascript"></script>

我的main.js

requirejs.config({
    paths: {
        'jquery': '../libs/jquery/jquery.min',

        // NOTE 1
        //'bootstrap': '../libs/bs3/bootstrap.min',

        // Backbone JS & Co
        "underscore": '../libs/underscore/underscore-min',
        "backbone": '../libs/backbone/backbone-min',

        // Dashboard Chart
        "salesView": 'views/Sales/DailySalesView',
    },
});

// Load Dashboard elements
require(["jquery", "underscore", "backbone", "salesView"], function ($, _, Backbone, SalesView) {

    // Show modal when dashboard page loads
    $('#loading-modal').modal('toggle');

}, function (err) {
    console.log(err)
});

注 1:

当我在 main.js 中启用 bootstrap 时,模态加载正常,但顶部导航栏下拉菜单 ul.nav > li.dropdown 停止工作。

所以我在 main.js 中禁用了 bootstrap,因为 bootstrap.js 已经添加到我的 base.html 中。顶部导航栏下拉菜单现在可以使用,但出现以下错误

TypeError: $(...).modal is not a function


问: 由于 bootstrap.js 已经添加到我的 base.html 中,我假设它已经加载并且 main.js 应该可以访问它。为什么不是这样呢?我该如何解决这个问题?

任何 help/advice 将不胜感激。

提前致谢

您正在使用 script 标记加载 jQuery 并使用 RequireJS 加载它。这是混淆的秘诀。发生的事情是 Bootstrap 安装在 script 加载的 jQuery 上,但没有安装在 RequireJS 加载的

上。

解决该问题的一种方法是从您的路径中删除 jquery 并在您的 main.js 中添加一个伪造的 jquery 模块,该模块仅重用加载了 [=11 的模块=]:

define('jquery', function () {
    return $; // Just return the jQuery loaded with `script`.
});

在您调用 requirejs.config 之后但在您的 require 调用之前添加它。