Question

I'm trying to learn KendoUI and RequireJS.
I've created simple application that is displaying window on load.

My require.config looks like this:

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"]
      }
    }
});

and my main:

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();

});

My application works, but from time to time I get error
Uncaught ReferenceError: jQuery is not defined

requirejs has option to specify shim, but it isn't working for KendoUI, probably I'm doing something wrong.

So my question is:
How should I configure requireJS to get it working with KendoUI?

Était-ce utile?

La solution

I got this working, I had to change shim config:

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

kendo.core depends on jQuery, so this part in code from my question was causing error.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top