Błąd tabel danych jQuery w require.js: niezdefiniowana nie jest funkcją

Cześć, próbuję skonfigurować pliki danych do pracy z require.js. Nie mam problemu z tym, że działa za pomocą zwykłych tagów skryptów, ale w pliku require.js kończy się niepowodzeniem i wyświetla się komunikat o błędzie undefined is not function, gdy próbuję zainicjować moją tabelę danych.

Poniżej znajduje się mój kod:

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

        });


    });

AKTUALIZACJA

Ponieważ DataTables identyfikuje się jako nazwany moduł, tak samo jak jquery, wszystko, co musiałem zrobić, aby działało, aby używać tej samej nazwy co nazwany moduł, zmieniając nazwę zależności „jquery.dataTables” na „datables” w pliku require.config paths, poniżej znajduje się działający kod

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

        });


    });

person GMoney    schedule 25.06.2014    source źródło


Odpowiedzi (2)


Ponieważ DataTables identyfikuje się jako nazwany moduł, tak samo jak jquery, wszystko, co musiałem zrobić, aby działało, aby używać tej samej nazwy co nazwany moduł, zmieniając nazwę zależności „jquery.dataTables” na „datables” w pliku require.config ścieżki,

poniżej znajduje się działający kod:

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

        });


    });
person GMoney    schedule 27.06.2014

Dodaj to do swojej konfiguracji shim:

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

Ostateczny wynik będzie następujący:

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

Co się dzieje?

Próbujesz uruchomić DataTable bez wcześniejszej zgody RequireJS. Aby mieć asynchroniczne działanie z RequireJS, musisz określić, które biblioteki chcesz usunąć i jak je wywołać, dlatego wyeksportowałem DataTables przez twoją konfigurację podkładki.

person Guilherme Oderdenge    schedule 25.06.2014
comment
O ile wiem, datatables jest już kompatybilny z AMD, więc nie ma potrzeby stosowania podkładki. Twoje rozwiązanie niczego nie zmienia. - person GMoney; 25.06.2014
comment
DataTables jest już kompatybilny z AMD... Więc? Musisz uczyć RequireJS, z kim chcesz pracować. W swoim $(function() { ... } spróbuj sprawdzić, jaki jest zwrot DataTables. - person Guilherme Oderdenge; 25.06.2014
comment
zgodnie z wymaganiami.js powinieneś używać podkładek tylko wtedy, gdy moduł nie używa definiowania () do wyrażania swoich zależności. Datatables już to robi, więc nie ma potrzeby przeglądania pierwszych kilku wierszy pliku datatables .js. - person GMoney; 25.06.2014