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
调用之前添加它。
我在 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
调用之前添加它。