Question

您好我正在尝试配置数据以使用require.js。我没有问题让它通过常规脚本标记工作，但当我尝试初始化我的数据表时，它在require.js中失败并显示错误消息undefined is not function。

以下是我的代码：

require.config({
    paths: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min',
        'underscore': 'lib/underscore',
        'backbone': 'lib/backbone',
        'jquery.bootstrap': 'lib/bootstrap.min',
        'jquery.dataTables' : 'lib/jquery.dataTables',
        'bootstrap.datepicker' : 'lib/bootstrap-datepicker'
    },
    shim: {
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'jquery.bootstrap': {
            deps: ['jquery']
        },
        'bootstrap.datepicker': {
            deps: ['jquery.bootstrap']
        }
    }
});


require(['jquery', 'jquery.bootstrap','jquery.dataTables','bootstrap.datepicker'],
    function () {

        var element = {
            "roeid": "TB582552763",
            "reportDate": "20140520",
            "status": "R",
            "rejReason": "Missing Order",
            "rejType": "Context",
            "roe": "#OE#|EX|N|TB582552751|||JPMS|20140520"
        };
        var data = [];
        for (var i = 0; i < 100; i++) {
            data.push(element);
        };

        var columns = [{
            sTitle: 'ROEID',
            data: 'roeid'
        }, {
            sTitle: 'Report Date',

            data: 'reportDate'
        }, {
            sTitle: 'Status',

            data: 'status'
        }, {
            sTitle: 'Rej Reason',

            data: 'rejReason'
        }, {
            sTitle: 'Rej Type',

            data: 'rejType'
        }, {
            sTitle: 'roeid',

            data: 'roe'
        }];

        $(function() {

             var oatsTable = $('#oatsTable').DataTable({
                data: data,
                columns: columns
            });


            $('#oatsTable tbody').on('click', 'tr', function () {
                $(this).toggleClass('selected');
                console.log(oatsTable.row(this).data());
                console.log(oatsTable.rows('.selected').data().length + ' row(s) selected');
            });

            $('#oats-upload-file').click(function () {
                $('#oats-file-upload-modal').modal('show');
            });

            $('#oats-file-submit').click(function () {
                $('#oats-file-upload-modal').modal('show');
            });

        });


    });

更新

由于DataTables将自己标识为命名模块，就像jquery一样，我只需要通过重命名＆quot; jquery.dataTables＆＃39;依赖名称为＆quot; datables＆＃39;在require.config路径下，下面是工作代码

require.config({
    paths: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min',
        'underscore': 'lib/underscore',
        'backbone': 'lib/backbone',
        'jquery.bootstrap': 'lib/bootstrap.min',
        'datatables' : 'lib/jquery.dataTables',
        'bootstrap.datepicker' : 'lib/bootstrap-datepicker'
    },
    shim: {
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'jquery.bootstrap': {
            deps: ['jquery']
        },
        'bootstrap.datepicker': {
            deps: ['jquery.bootstrap']
        }
    }
});


require(['jquery', 'jquery.bootstrap','datatables','bootstrap.datepicker'],
    function () {

        var element = {
            "roeid": "TB582552763",
            "reportDate": "20140520",
            "status": "R",
            "rejReason": "Missing Order",
            "rejType": "Context",
            "roe": "#OE#|EX|N|TB582552751|||JPMS|20140520"
        };
        var data = [];
        for (var i = 0; i < 100; i++) {
            data.push(element);
        };

        var columns = [{
            sTitle: 'ROEID',
            data: 'roeid'
        }, {
            sTitle: 'Report Date',

            data: 'reportDate'
        }, {
            sTitle: 'Status',

            data: 'status'
        }, {
            sTitle: 'Rej Reason',

            data: 'rejReason'
        }, {
            sTitle: 'Rej Type',

            data: 'rejType'
        }, {
            sTitle: 'roeid',

            data: 'roe'
        }];

        $(function() {

             var oatsTable = $('#oatsTable').DataTable({
                data: data,
                columns: columns
            });


            $('#oatsTable tbody').on('click', 'tr', function () {
                $(this).toggleClass('selected');
                console.log(oatsTable.row(this).data());
                console.log(oatsTable.rows('.selected').data().length + ' row(s) selected');
            });

            $('#oats-upload-file').click(function () {
                $('#oats-file-upload-modal').modal('show');
            });

            $('#oats-file-submit').click(function () {
                $('#oats-file-upload-modal').modal('show');
            });

        });


    });

Answer 1

由于DataTables将自己标识为命名模块，就像jquery一样，我只需要通过重命名＆quot; jquery.dataTables＆＃39;依赖名称为＆quot; datables＆＃39;在require.config路径下，

下面是工作代码：

require.config({
    paths: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min',
        'underscore': 'lib/underscore',
        'backbone': 'lib/backbone',
        'jquery.bootstrap': 'lib/bootstrap.min',
        'jquery.dataTables' : 'lib/jquery.dataTables',
        'bootstrap.datepicker' : 'lib/bootstrap-datepicker'
    },
    shim: {
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'jquery.bootstrap': {
            deps: ['jquery']
        },
        'bootstrap.datepicker': {
            deps: ['jquery.bootstrap']
        }
    }
});


require(['jquery', 'jquery.bootstrap','jquery.dataTables','bootstrap.datepicker'],
    function () {

        var element = {
            "roeid": "TB582552763",
            "reportDate": "20140520",
            "status": "R",
            "rejReason": "Missing Order",
            "rejType": "Context",
            "roe": "#OE#|EX|N|TB582552751|||JPMS|20140520"
        };
        var data = [];
        for (var i = 0; i < 100; i++) {
            data.push(element);
        };

        var columns = [{
            sTitle: 'ROEID',
            data: 'roeid'
        }, {
            sTitle: 'Report Date',

            data: 'reportDate'
        }, {
            sTitle: 'Status',

            data: 'status'
        }, {
            sTitle: 'Rej Reason',

            data: 'rejReason'
        }, {
            sTitle: 'Rej Type',

            data: 'rejType'
        }, {
            sTitle: 'roeid',

            data: 'roe'
        }];

        $(function() {

             var oatsTable = $('#oatsTable').DataTable({
                data: data,
                columns: columns
            });


            $('#oatsTable tbody').on('click', 'tr', function () {
                $(this).toggleClass('selected');
                console.log(oatsTable.row(this).data());
                console.log(oatsTable.rows('.selected').data().length + ' row(s) selected');
            });

            $('#oats-upload-file').click(function () {
                $('#oats-file-upload-modal').modal('show');
            });

            $('#oats-file-submit').click(function () {
                $('#oats-file-upload-modal').modal('show');
            });

        });


    });

Answer 2

将此添加到您的shim配置中：

'jquery.dataTables': {
    deps: ['jquery'],
    exports: 'DataTable'
}

最终结果将是：

   shim: {
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'jquery.bootstrap': {
            deps: ['jquery']
        },
        'bootstrap.datepicker': {
            deps: ['jquery.bootstrap']
        },
        'jquery.dataTables': {
             deps: ['jquery'],
             exports: 'DataTable'
        } 
    }

发生了什么事？

您试图在未经RequireJS同意的情况下运行DataTable。要获得RequireJS的异步体验，您必须指定要配置哪些库以及如何调用它们，这就是我通过您的垫片配置导出DataTables的原因。

require.js中的jQuery datatables错误：undefined不是函数

2 个答案:

发生了什么事？