RequireJS和KendoUI - Shim jQuery依赖

时间:2014-05-08 14:40:26

标签: javascript jquery kendo-ui requirejs

我正在尝试学习KendoUI和RequireJS 我创建了一个在加载时显示窗口的简单应用程序。

我的require.config如下所示:

require.config({
    paths: {
        jQuery: [
            'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min',
            'libs/jquery-2.1.0'
        ],
        underscore: [
            'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min',
            'libs/underscore'
        ],
        handlebars: [
            'http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.2/handlebars.min',
            'libs/handlebars'
        ],
        k: 'libs/kendo',
        text: 'libs/require/text',
        async: 'libs/require/async',
        templates: 'templates'

    },
    shim: {
        'jQuery': {
            exports: '$'
        },
        'underscore': {
            exports: '_'
        },
        'handlebars': {
            exports: 'Handlebars'
        },
        "k": {
          deps: ["jQuery"]
      }
    }
});

和我的主要:

require(['jQuery', 'handlebars', 'helpers/handlebarsHelper', 'k/kendo.notification', 'k/kendo.window'], function ($, Handlebars, hh) {

    hh.init();

    var context = {
        people: [{
            firstName: "Yehuda",
            lastName: "Katz"
        }, {
            firstName: "Carl",
            lastName: "Lerche"
        }, {
            firstName: "Alan",
            lastName: "Johnson"
        }]
    };

    var x = hh.getTemplate('test');
    $('#container2').html(x(context));
    var x = hh.getTemplate('test');
    $('#container3').html(x(context));

    var popupNotification = $("#popupNotification").kendoNotification({
        position: {
            top: 20,
            right: 20
        }
    }).data("kendoNotification");

    window.setInterval(function () {
        var d = new Date();
        popupNotification.show(kendo.toString(d, 'HH:MM:ss.') + kendo.toString(d.getMilliseconds(), "000"), "error");
    }, 7000);

    $("#window").kendoWindow({
        width: "500px",
        modal: true,
        resizable: false,
        actions: ["Close"],
        title: "About Josef Hoffmann",
        visible: false
    }).data("kendoWindow").center().open();

});

我的申请有效,但我不时会收到错误Uncaught ReferenceError: jQuery is not defined

requirejs有指定shim的选项,但它对KendoUI不起作用,可能是我做错了。

所以我的问题是:
我应该如何配置requireJS以使其与KendoUI一起使用?

1 个答案:

答案 0 :(得分:2)

我有这个工作,我不得不改变shim config:

shim: {
    'jQuery': {
        exports: '$'
    },
    'underscore': {
        exports: '_'
    },
    'handlebars': {
        exports: 'Handlebars'
    },
    "kendo/kendo.core": {
        deps: ["jQuery"]
    }
}

kendo.core依赖于jQuery,因此我的问题代码中的这一部分导致了错误。