javascript - RequireJS 和 KendoUI - Shim jQuery 依赖项

标签 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 未定义

requirejs 可以选择指定 shim,但它不适用于 KendoUI,可能是我做错了什么。

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

最佳答案

我得到了这个工作,我必须更改垫片配置:

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

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

关于javascript - RequireJS 和 KendoUI - Shim jQuery 依赖项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23545011/

相关文章:

javascript - 如何在一行中显示来自 MySQL 的列,每个项目都有计数器

javascript - 在 ASP.NET MVC 中通过 AJAX 从操作获取 html 数据后更改输入名称属性

javascript - 表单脚本清除文本区域

jquery - 我可以在 CSS 中为带有属性选择器和类的输入定义样式吗?

jquery - 我还需要什么才能使剑道网格自定义工具栏命令正常工作?

javascript - 带有 dataItem 数组和 Angular ng-click 的剑道树列表模板

javascript - Chrome 扩展程序图标未全部显示

javascript - 为什么我在使用 Passport 和 session 时没有保持登录状态? Passport 的 "isAuthenticated()"总是返回 false

javascript - 牛顿拉夫森法 JavaScript

angular - Angular 4 中 KendoUI 的替代品