如何将 jquery ui 与 requireJS 和 knockout-sortable 一起使用?

How to use jquery ui with requireJS and knockout-sortable?

我正在尝试使用 requireJS 来管理我的第一个单页 javascript 应用程序中的依赖项。以前从未使用过 requireJS,我正在为一些我认为是 quit 基本的东西而苦苦挣扎。

我的项目使用 knockoutJS 和一个名为 knockout-sortable 的插件,它为 jquery ui 'sortable' 插件提供了 knockout 绑定。当我只加载 jquery ui、knockout 和其他所有没有 requireJS.

的时候一切正常

我的请求uire main.js 看起来像这样:

require.config({
    baseUrl: '/Scripts',
    paths: {
        jQuery: 'jquery-2.1.3',
        jQueryUI: 'jquery-ui-1.10.2',
        knockout: 'knockout-3.3.0',
        knockoutSortable: 'knockout-sortable',
        AppViewModel: 'app/AppViewModel'
    },
    shim: {
        "jQueryUI": {
            export: "$",
            deps: ['jQuery']
        },
        "knockoutSortable": {
            export: ["ko"],
            deps: ['jQuery','jQueryUI']
        },
    }
});


require(['jQuery', 'jQueryUI', 'knockoutSortable', 'AppViewModel'], function ($, ui, ko, AppViewModel) {
    ko.applyBindings(new AppViewModel());
});

但我在 javascript 中收到一条错误消息:

GET http://localhost:8020/Scripts/jquery-ui/draggable.js 
require.js:166 Uncaught Error: Script error for: jquery-ui/draggable
http://requirejs.org/docs/errors.html#scripterror
require.js:1910 GET http://localhost:8020/Scripts/jquery-ui/sortable.js 
require.js:166 Uncaught Error: Script error for: jquery-ui/sortable
http://requirejs.org/docs/errors.html#scripterror

我猜 knockout-sortable 以某种方式 requires 依赖项 jquery.ui/sortable.js,但该文件不存在,因为 jquery-ui只有一个文件!

此页面 https://learn.jquery.com/jquery-ui/environments/amd/ 还建议我将 jquery ui 文件组织到某种文件夹结构中,但我只有一个 jquery ui 文件,所以我不知道该怎么做。

顺便说一句:我在 visual studio 中使用 ASP.NET MVC 5,这就是为什么我的脚本位于 'Script' 文件夹中而不是 'JS' 文件夹中.我已经使用 NuGet 更新了 jquery、jquery ui 和 knockout 到最新版本,并且我已经手动将 knockout-sortable 升级到版本 0.11,因为它是在 4 天前发布的,并且在 nuget 上尚不可用。

有人知道这里发生了什么以及如何解决它吗?

安装jquery-ui with bower or download them from github.

即可获取AMD模块

获得所需文件后,删除 jquery-ui 的 shim 配置,因为它只能用于非 AMD 脚本。

knockout-sortable 也是一个 AMD 模块,因此您不需要任何 shim 配置。