在CakePHP中使用RequireJS加载datables:用DebugKit发出问题

I've reedited this question to keep it as clean as possible. I hope that doesn't bother you.

我对这个问题进行了修改，以尽可能保持简洁。我希望你不会介意。

My main problem is that the jquery plugin datatables is not being loaded properly in my requirejs setup. (v1.9.4)

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

I am also trying to use DT_bootstrap (which extends datatables to bootstrap). When i run my pages the console always tells me that DT_bootstrap failed because $.fn.dataTable is not defined. The problem can not be in DT_bootstrap, because I don't need it to run datatables and if I remove it from my app the error is still the same. I read here that requirejs is not ready to be normally loaded with requirejs but I've found some people that did end up implementing it successfully, most of them in different ways. So far none of the examples I've found worked for me.

我还在尝试使用DT_bootstrap(它将datatables扩展到bootstrap)。当我运行我的页面时，控制台总是告诉我，DT_bootstrap失败是因为$.fn。dataTable没有定义。问题不可能在DT_bootstrap中，因为我不需要它来运行datatables，如果我从应用程序中删除它，错误仍然是一样的。我在这里读到，requirejs并没有准备好被安魂曲加载，但是我发现有些人最终成功地实现了它，其中大部分是以不同的方式实现的。到目前为止，我发现的这些例子中没有一个对我有效。

Error: "Uncaught TypeError: Cannot read property 'defaults' of undefined " (DT_bootstrap.js) typeof $.fn.dataTable is undefined and it should be a function...

错误:“Uncaught TypeError: can ' t read property 'defaults' of undefined”(DT_bootstrap.js)类型为$.fn的类型。dataTable是未定义的，它应该是一个函数……

Before I decide to implement requirejs in my app one of my scripts (general.js) was checking if there were any tables with class "datatable" and when they exist I would run the datatables script assynchronously, which works great. I would prefer to keep it that way so that I don't load datatables code in all of my app pages, but it doesn't work. I get exactly the same error as if I was trying to load it with requirejs.

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

Here is my "data-main" script:

这是我的“数据主”脚本:

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');
    }
);

Please also note that:

也请注意:

1. this is how I'm running require.js: <script type="text/javascript" src="/js/require.js" data-main="/js/app.js"></script> (note that the path to the javascript folder starts by "/")

   这就是我跑步的要求。< js:script type = " text / javascript " src = " / js /要求。js " data-main = " / js /应用程序。js">(注意，指向javascript文件夹的路径以"/"开头)

2. if I remove "datatables" and "datatables-bootstrap" my app runs without any errors

   如果我删除“datatables”和“datatabls -bootstrap”，我的应用程序将不会运行任何错误

3. in my general.js I have other conditions that run jquery plugins assynchronously (all work except datatables)

   在我的将军。我还有其他同步运行jquery插件的条件(除了数据外所有工作)

   example: if calendar element exists, then load jquery plugin calendar script via $.getScript()

   示例:如果存在calendar元素，那么通过$.getScript()加载jquery插件日历脚本

4. User dcodesmith tried to help me recently (check his answer) and ask me to try his config in my app, which didn't work. Then I tried to use it in a simple website and it worked for that simple app, but same doesn't happen in my cakephp app where javascript folder is referenced as "/js". The main differences I found were: in his app all the files were in the same folder and that doesn't happen on my app (probably related to point 1).

   用户dcodesmith最近试图帮助我(查看他的答案)，并让我在我的应用中尝试他的配置，但没有成功。然后我尝试在一个简单的网站上使用它，它为那个简单的应用程序工作，但是同样的事情在我的cakephp应用程序中没有发生，javascript文件夹被引用为“/js”。我发现的主要区别是:在他的应用中，所有的文件都在同一个文件夹中，而这在我的应用中是不会发生的(可能与第一点有关)。

5. I have also tried using "exports": 'jQuery.fn.dataTable' or even "exports": 'jQuery.fn.DataTable' or "exports": '$.fn.dataTable'... all without success

   我也尝试过使用“export”:jQuery.fn。“dataTable”甚至“exports”:jQuery.fn。数据表”或“出口”:“.fn.dataTable美元”……都没有成功

6. As a test, if I remove both datatables scripts from my config and then I run $.getScript() the file loads successfully but the jquery plugin is still not defined ($.fn.dataTable) and therefore I still can't use it

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

2 个解决方案

#1

Right, so what I've done is started from the bottom-up and get a bare metal configuration working.

好的，我所做的就是从下至上开始，得到一个裸金属结构的工作。

app.js

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

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>

Folder Structure

文件夹结构

Update: Use the shim below and require statement below

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');
    }
);

#2

I finally found the source of my problem.

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

I recreated a website with the same kind of routing and folders as my cakephp app and I finally found something.

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

I use a debug plugin in CakePHP called DebugKit, that plugin appends 2 scripts at the end of the of the document. One of them is jQuery 1.8.1 and the plugin's script which is basically a toolbar similar to a horizontal navigation.

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

I was always told to not worry in removing this instance of jQuery because it was being loaded in a non conflict way, it happens that once I disabled this, my requirejs config finally worked with the plugin datatables as I wanted!

我总是被告知不要担心删除这个jQuery实例，因为它是以一种不冲突的方式加载的，一旦我禁用了它，我的requirejs配置最终会按照我的要求使用插件datatables !

I don't know why the exact reason of this conflict, but I'm quite sure it comes from this part of the code: https://github.com/cakephp/debug_kit/blob/master/webroot/js/js_debug_toolbar.js#L59-73

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

I never noticed this before because I only use the datatables plugin in my admin section and the php debugger plugin is always on when I'm logged as admin.

我以前从来没有注意到这一点，因为我只在管理部分使用datatables插件，当我作为管理员登录时，php调试器插件总是处于打开状态。

I'll change the title to include cakephp, might be useful for someone with the same problem

我将把标题改为包含cakephp，这对于有同样问题的人来说可能很有用