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

Question

我正在尝试使用 requireJS 来管理我的第一个单页 JavaScript 应用程序中的依赖项。以前从未使用过 requireJS，我正在努力解决一些我认为非常基本的问题。

我的项目使用knockoutJS和一个名为knockout-sortable的插件，它为jquery ui“sortable”插件提供knockout绑定(bind)。当我只加载 jquery ui、knockout 和其他所有内容而不需要 requireJS 时，一切都工作正常。

我的 require 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在某种程度上需要依赖项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 上可用。

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

Answer 1

安装jquery-ui时可以获得AMD模块with bower或下载from github .

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

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