如何将 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 配置。
我正在尝试使用 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 配置。