使用require.js配置jquery数据表并与backbone.js一起使用

Question

我想在我的一个表中使用jquery dataTables插件,它是使用backbone.js动态生成的

在探索了使用require.js配置dataTable的选项后,我推出了这个解决方案

这是来自我的main.js文件

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"
        }

    },

});

运行到这个配置,应用程序工作得很好,但在我的app.js中使用此对象后,打破了正常的应用程序流

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

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

    var initialize = function() {

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

    }

    return {
        initialize : initialize
    };

});

我在firebug中收到以下错误

错误:脚本错误:dataTable http://requirejs.org/docs/errors.html#scripterror

如果我不在我的app.js中包含dataTable,那么我得到

$(...).dataTable不是一个函数

有人可以帮我弄清楚这里有什么问题.

Answer 1

不需要做垫片在requireJS配置为数据表插件,因为已经是AMD模块,只需更改密钥从dataTable到datatables您的路径定义,这样做的原因是,它的AMD模块使用该名称定义的,请在这里查看源代码.

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 : "_"
        }

    },

});

现在,当您导入datatables插件时,该$("selector").dataTable()功能将可用

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

    var initialize = function() {

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

    }

    return {
        initialize : initialize
    };

});

Answer 2

dataTables（如 jquery）已经兼容 AMD，请将其从 Shim 配置中删除。