Question

我正在开发一个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延伸base.html，require.js仅使用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：

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

所以我在bootstrap中禁用了main.js，因为bootstrap.js已添加base.html。 Top Navbar下拉列表现在可以工作但是我收到以下错误

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

问：由于bootstrap.js已添加base.html，我假设它已经加载，而main.js应该可以访问它。为什么不是这样？我该如何解决这个问题？

任何帮助/建议都将不胜感激。

先谢谢

Answer 1

您正在使用script标记加载jQuery并使用RequireJS加载它。这是混乱的一个秘诀。发生的事情是Bootstrap安装在加载script的jQuery上，但不安装在RequireJS加载的jQuery上。

解决问题的一种方法是从您的路径中删除jquery，然后将main.js假冒jquery模块添加到仅重用script加载的模块中：

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

在致电requirejs.config之后但在require来电之前添加。

Bootstrap.js与require.js冲突并禁用Navbar下拉列表

1 个答案: