我已经重新编辑了这个问题以使其尽可能干净。我希望这不会打扰你。
我的主要问题是 jquery 插件数据表没有在我的 requirejs 设置中正确加载。 (v1.9.4)
我也在尝试使用 DT_bootstrap(将数据表扩展到 Bootstrap )。当我运行我的页面时，控制台总是告诉我 DT_bootstrap 失败，因为未定义 $.fn.dataTable。问题不可能出在 DT_bootstrap 中，因为我不需要它来运行数据表，如果我将它从我的应用程序中删除，错误仍然是一样的。 我在这里读到 requirejs 还没有准备好正常加载 requirejs 但我发现有些人最终成功地实现了它，其中大多数人以不同的方式。到目前为止，我发现的所有示例都不适合我。
错误:“未捕获类型错误:无法读取未定义的属性‘默认值’”(DT_bootstrap.js) typeof $.fn.dataTable 未定义，它应该是一个函数...
在我决定在我的应用程序中实现 requirejs 之前，我的一个脚本 (general.js) 正在检查是否有任何具有类“datatable”的表，当它们存在时我将异步运行数据表脚本，这非常有效。 我宁愿保持这种方式，这样我就不会在我的所有应用程序页面中加载数据表代码，但它不起作用。我得到的错误与我尝试使用 requirejs 加载它时的错误完全相同。
这是我的“data-main”脚本:
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文件夹路径以“/”开头)如果我删除“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
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>
文件夹结构
更新:使用下面的 shim 和下面的 require 语句
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');
}
);
关于javascript - 在 CakePHP 中使用 RequireJS 加载数据表 : Issue with DebugKit，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21183535/