Configuring jquery datatable with require.js and using with backbone.js

Question

I want to use jquery dataTables plugin for one of my table which is dynamically generated using backbone.js

After exploring the options for configuring dataTable with require.js I came out with this solution

This is from my main.js file

require.config({
    baseUrl : 'js',
    paths: {
        jquery: '../../assets/js/libs/jquery/jquery-1.10.2.min',
        underscore: '../../assets/js/libs/underscore/underscore',
        backbone: '../../assets/js/libs/backbone/backbone',
        dataTable : '../../assets/js/libs/jquery/jquery.dataTables.min.js'
    },

    shim : {

        backbone : {
            deps : [ "underscore", "jquery" ],
            exports : "Backbone"
        },

        underscore : {
            exports : "_"
        },

        dataTable : {
            deps : ["jquery"],
            exports : "Datatable"
        }

    },

});

Running upto this configuration, applications works perfectly but after using this object in in my app.js breaks the normal flow of application

define([
        'jquery','underscore', 'backbone', 'router', 'dataTable'
        ], 

function($, _, Backbone, Router, Datatable) {

    var initialize = function() {

        // calls router.js's initialize() function
        Router.initialize();

    }

    return {
        initialize : initialize
    };

});

I get the following error in firebug

Error: Script error for: dataTable http://requirejs.org/docs/errors.html#scripterror

and if i do not include dataTable in my app.js then i get

$(...).dataTable is not a function

Can someone help me in figuring out what's wrong here.

Answer 1

Don't need to do shim in your requireJS config for the dataTables plugin since is already an AMD module, just change the key from dataTable to datatables in your paths definitions, the reason for this is that the AMD module for it is defined with that name, please take a look at the source code here.

require.config({
    baseUrl : 'js',
    paths: {
        jquery: '../../assets/js/libs/jquery/jquery-1.10.2.min',
        underscore: '../../assets/js/libs/underscore/underscore',
        backbone: '../../assets/js/libs/backbone/backbone',
        datatables : '../../assets/js/libs/jquery/jquery.dataTables.min.js'
    },

    shim : {

        backbone : {
            deps : [ "underscore", "jquery" ],
            exports : "Backbone"
        },

        underscore : {
            exports : "_"
        }

    },

});

Now when you import the datatables plugin the $("selector").dataTable() function will be available

define(['jquery','underscore', 'backbone', 'router', 'datatables'],     
function($, _, Backbone, Router) {

    var initialize = function() {

        // calls router.js's initialize() function
        Router.initialize();

    }

    return {
        initialize : initialize
    };

});