关于 javascript:Loading DataTables with RequireJS in CakePHP: Issue with DebugKit


Loading DataTables with RequireJS in CakePHP: Issue with DebugKit

我已重新编辑此问题，以使其尽可能简洁。我希望这不会打扰你。

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

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

错误："未捕获的类型错误：无法读取未定义的属性 \\'defaults\\'"(DT_bootstrap.js)
typeof $.fn.dataTable 未定义，它应该是一个函数...

在我决定在我的应用程序中实现 requirejs 之前，我的一个脚本 (general.js) 正在检查是否有任何具有类 "datatable" 的表，当它们存在时，我会异步运行 datatables 脚本，这很好用.
我宁愿保持这种方式，这样我就不会在我的所有应用程序页面中加载数据表代码，但它不起作用。我得到完全相同的错误，就好像我试图用 requirejs 加载它一样。

这是我的"数据主"脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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">(注意 javascript 文件夹的路径以 "/" 开头)

  • 如果我删除 "datatables" 和 "datatables-bootstrap" 我的应用程序运行没有任何错误

  • 在我的 general.js 中，我还有其他异步运行 jquery 插件的条件(除了数据表之外的所有工作)

    示例：如果日历元素存在，则通过 $.getScript()

    加载 jquery 插件日历脚本

  • 用户 dcodesmith 最近试图帮助我(检查他的答案)并要求我在我的应用程序中尝试他的配置，但没有成功。然后我尝试在一个简单的网站中使用它，它适用于那个简单的应用程序，但在我的 cakephp 应用程序中没有发生同样的情况，其中 javascript 文件夹被引用为 "/js"。我发现的主要区别是：在他的应用程序中，所有文件都在同一个文件夹中，而我的应用程序不会发生这种情况(可能与第 1 点有关)。

  • 我也尝试过使用 "exports": 'jQuery.fn.dataTable' 甚至 "exports": 'jQuery.fn.dataTable' 或 "exports": '$.fn.dataTable'... 都没有成功

  • 作为测试，如果我从我的配置中删除两个数据表脚本，然后我运行 $.getScript() 文件加载成功，但 jquery 插件仍未定义($.fn.dataTable)，因此我仍然不能使用它

    • 相关讨论

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

    app.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!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">
        DataTable Bootstrap
    </head>
    <body>

        <table id="table_id"/>

    </body>
    </html>

    文件夹结构

    enter

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    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');
        }
    );
    相关讨论

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

    我重新创建了一个与我的 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

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

    我将更改标题以包含 cakephp，可能对遇到相同问题的人有用

    相关讨论