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

Question

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

以下是我的代码:

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

        });


    });

UPDATE

由于DataTables将自己标识为命名模块,就像jquery一样,所有我必须做的就是使用与命名模块相同的名称,方法是在require.config下将'jquery.dataTables'依赖名重命名为'datables'路径,下面是工作代码

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一样,所有我必须做的就是使用与命名模块相同的名称,方法是在require.config下将'jquery.dataTables'依赖名重命名为'datables'路径

以下是工作代码:

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

        });


    });