Question

我已经重新审视了这个问题，以尽可能保持清洁。我希望这不会打扰你。

我的主要问题是我的requirejs设置中没有正确加载jquery插件数据表。（v1.9.4）

我也在尝试使用DT_bootstrap（它将数据表扩展到bootstrap）。当我运行我的页面时，控制台总是告诉我DT_bootstrap失败，因为没有定义$ .fn.dataTable。问题不在DT_bootstrap中，因为我不需要它来运行数据表，如果我从我的应用程序中删除它，错误仍然是相同的。我在这里读到，requirejs还没有准备好正常加载requirejs，但是我发现有些人最终成功地实现了它，其中大部分以不同的方式。到目前为止，我发现的所有例子都没有为我工作。

错误：＆＃34;未捕获的TypeError：无法读取属性＆＃39;默认值＆＃39;未定义＆＃34; （DT_bootstrap.js） typeof $ .fn.dataTable是未定义的，它应该是一个函数......

在我决定在我的应用程序中实现requirejs之前，我的一个脚本（general.js）正在检查是否有任何带有类的表＆＃34; datatable＆＃34;当它们存在时，我会异步运行datatables脚本，这非常有用。我希望保持这种方式，以便我不会在我的所有应用页面中加载数据表代码，但它不起作用。我得到完全相同的错误，好像我试图用requirejs加载它。

这是我的＆＃34; data-main＆＃34;脚本：

require.config({
    paths: {
        "jquery": "../vendor/jquery/jquery", // 1.9.1
        "jquery.cookie": "../vendor/jquery.cookie/jquery.cookie",
        "bootstrap": "../vendor/bootstrap/docs/assets/js/bootstrap", // 2.3.2
        "bootstrap-timepicker": "../vendor/bootstrap-timepicker/js/bootstrap-timepicker",
        "jqueryui": "jquery-ui-1.10.3.custom.min",
        "datatables": "jquery.dataTables", // 1.9.4
        "datatables-bootstrap": "DT_bootstrap",
        "modernizr": "../vendor/modernizr/modernizr",
        "general": "general"
    },
    shim: {
        "jquery": {
            "exports": 'jQuery'
        },
        "jquery.cookie": {
            "deps": ["jQuery"],
            "exports": 'jQuery'
        },
        "bootstrap": {
            "deps": ['jQuery'],
            "exports": 'jQuery'
        },
        "bootstrap-timepicker" : {
            "deps": ['jQuery', 'bootstrap']
        },
        "datatables": {
            "deps": ['jQuery']
        },
        "datatables-bootstrap": {
            "deps": ['jQuery', 'datatables', 'bootstrap']
        },
        "jqueryui": {
            "deps": ['jQuery']
        },
        "general": {
            "deps": ['jQuery', 'bootstrap']
        }
    }
});

require(
    [
        "modernizr", 
        "jquery", 
        "jquery.cookie", 
        "bootstrap", 
        "bootstrap-timepicker", 
        "jqueryui", 
        "general",
        "datatables",
        "datatables-bootstrap"
    ], 
    function () {
        //  console.log('something here');
    }
);

请注意：

这就是我运行require.js的方式：<script type="text/javascript" src="/js/require.js" data-main="/js/app.js"></script>（请注意，javascript文件夹的路径以＆＃34; /＆＃34开头;）
< / LI>
如果我删除＆＃34;数据表＆＃34;和＆＃34; datatables-bootstrap＆＃34;我的应用运行没有任何错误
在我的general.js中我有其他条件以异步方式运行jquery插件（除数据表之外的所有工作）

示例：如果日历元素存在，则通过$.getScript()
用户dcodesmith最近试图帮助我（检查他的答案）并让我在我的应用程序中尝试他的配置，但这并不起作用。然后我尝试在一个简单的网站中使用它，它适用于那个简单的应用程序，但同样不会发生在我的cakephp应用程序中，其中javascript文件夹被引用为＆＃34; / js＆＃34;。我发现的主要区别是：在他的应用程序中，所有文件都在同一个文件夹中，并且在我的应用程序中没有发生（可能与第1点相关）。
我也尝试过使用"exports": 'jQuery.fn.dataTable'甚至"exports": 'jQuery.fn.DataTable'或"exports": '$.fn.dataTable' ...都没有成功
作为测试，如果我从配置中删除两个数据表脚本然后运行$.getScript()文件加载成功，但jquery插件仍未定义（$ .fn.dataTable），因此我仍然无法使用

Answer 1

是的，所以我所做的就是从下往上开始，让裸机配置正常工作。

<强> app.js

require.config({
    paths: {
        "jquery": "jquery-1.10.2",
        "datatables": "jquery.dataTables-1.9.4.min",
        "DT-bootstrap": "DT_bootstrap"
    },
    shim: {
        "datatables": {
            "deps": ['jquery']
        },
        "DT-bootstrap": {
            "deps": ['datatables']
        }
    }
});

require(["jquery", "datatables", 'DT-bootstrap'], function () {

    $('#table_id').dataTable( {
        "aaData": [
            ['Trident', 'Internet Explorer 4.0', 'Win 95+', 4, 'X'],
            ['Trident', 'Internet Explorer 5.0', 'Win 95+', 5, 'C']
        ],
        "aoColumns": [
            { "sTitle": "Engine" },
            { "sTitle": "Browser" },
            { "sTitle": "Platform" },
            { "sTitle": "Version" },
            { "sTitle": "Grade" }
        ]
    });

});

<强>的index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
<script type="text/javascript" data-main="app.js" src="require.js"></script>
    <title>DataTable Bootstrap</title>
</head>
<body>

    <table id="table_id"/>

</body>
</html>

文件夹结构

enter image description here

更新：使用下面的垫片并在下面要求声明

shim: {
    "jquery.cookie": ["jquery"],
    "bootstrap": ['jquery'],
    "bootstrap-timepicker" : ['jquery', 'bootstrap'],
    "datatables": ['jquery'],
    "datatables-bootstrap": ['datatables', 'bootstrap'],
    "jqueryui": ['jquery'],
    "general": ['jquery', 'bootstrap']
}

require(
    [
        "modernizr", 
        "jquery", 
        "datatables",
        "datatables-bootstrap"
        "jquery.cookie", 
        "bootstrap", 
        "bootstrap-timepicker", 
        "jqueryui", 
        "general"
    ], 
    function () {
        //  console.log('something here');
    }
);

Answer 2

我终于找到了问题的根源。

我使用与我的cakephp应用程序相同类型的路由和文件夹重新创建了一个网站，我终于找到了一些东西。

我在CakePHP中使用一个名为DebugKit的调试插件，该插件在文档的末尾添加了2个脚本。其中一个是jQuery 1.8.1和插件的脚本，它基本上是一个类似于水平导航的工具栏。

我总是被告知不要担心删除这个jQuery实例，因为它是以非冲突的方式加载的，一旦我禁用了它，我的requirejs配置终于可以使用我想要的插件数据表！

我不知道为什么会出现这种冲突的确切原因，但我确信它来自这部分代码： https://github.com/cakephp/debug_kit/blob/master/webroot/js/js_debug_toolbar.js#L59-73

之前我从未注意到这一点，因为我只在管理部分使用datatables插件，当我以管理员身份登录时，php调试器插件始终处于打开状态。

我会将标题更改为包含cakephp，对于有相同问题的人可能会有用

在CakePHP中使用RequireJS加载DataTables：DebugKit问题

2 个答案:

更新：使用下面的垫片并在下面要求声明