使用 jquery-ui 小部件

Question

我想使用 jquery-ui 的可排序小部件。我用 jquery-ui 安装了：

bower install jquery-ui

我正在使用 require.js。我加了一段jquery-ui/sortable:

paths: {
    ...
    'jquery.ui/sortable': 'bower_components/jquery.ui/ui/widgets/sortable'
    ...

在我的模块中，我导入了：

define(
[
    'jquery.ui/sortable',
    ...
],
function(
    sortable,
    ...
) {

这会给我带来很多错误，因为 sortable.js 然后会尝试导入它的依赖项。我能让它工作的唯一方法是为 sortable.js:

的每个依赖项添加一个路径

    'jquery.ui/sortable': 'bower_components/jquery.ui/ui/widgets/sortable',
    'jquery.ui/mouse': 'bower_components/jquery.ui/ui/widgets/mouse',
    'jquery.ui/scroll-parent': 'bower_components/jquery.ui/ui/scroll-parent',
    'data': 'bower_components/jquery.ui/ui/data',
    'ie': 'bower_components/jquery.ui/ui/ie',
    'version': 'bower_components/jquery.ui/ui/version',
    'widget': 'bower_components/jquery.ui/ui/widget',

这似乎是一种非常费力的方法。另外 'data'、'ie'、'version' 和 'widget' 只有在我不给它们命名空间时才有效。

这是使用 jquery-ui 小部件的正确方法吗？

Answer 1

如果您引用的所有模块最终都在 bower_components/jquery.ui/ui/widgets/ 下，那么您可以使用 map 而不是列出每个模块的 paths：

map: {
  "*": {
    "jquery.ui": "bower_components/jquery.ui/ui/widgets"       
  }
}

这应该将每个请求映射到 jquery.ui/x 到 bower_components/jquery.ui/ui/widgets。因为映射将模块名称转换为另一个模块名称，所以 bower_components/jquery.ui/ui/widgets 中从 .. 导入的任何模块都将从 bower_components/jquery.ui/ui.

获得模块

使用 jquery-ui 小部件

Using a jquery-ui widget

javascript

jquery

jquery-ui

requirejs