如何在 Aurelia 中使用 JQuery-UI [英] How to use JQuery-UI with Aurelia
问题描述
我使用 Aurelia CLI 启动了一个新的 Aurelia 应用.
I started a new Aurelia app using the Aurelia CLI.
我使用 Aurelia 文档中的说明安装了 JQuery 并配置了 aurelia.json:
I installed JQuery and configured aurelia.json using the instructions at the Aurelia documentation:
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/6
然后我 npm 安装了 Jquery-ui.
I then npm installed Jquery-ui.
我现在需要知道如何配置 audelia.json 来识别 jquery-ui.
I now need to know how to configure audelia.json to recognize jquery-ui.
在 Aurelia 文档中,这个例子是关于如何引用模块的:
In the Aurelia documentation this example is given on how to reference a module:
"dependencies": [
{
"name": "library-name",
"path": "../node_modules/library-name/dist/library-name"
}
]
问题在于,与直接下载 jquery-ui 时不同,JQuery-ui 模块没有实际的 Jquery-ui.js 文件(如果有我找不到).
The problem is that unlike when you download jquery-ui directly, the JQuery-ui module does not have an actual Jquery-ui.js file ( if it does I couldn't find it).
谢谢
推荐答案
据我所知,jquery-ui
包不包含内置"版本的 jquery-ui.我终于通过使用 jquery-ui-dist
包来完成这项工作,其中包括默认的 jquery-ui.js 和 jquery-ui.css 文件.
The jquery-ui
package doesn't include a "built" version of jquery-ui as far as I can tell. I finally got this working by using the jquery-ui-dist
package, which includes the default jquery-ui.js and jquery-ui.css files.
npm install jquery-ui-dist --save
现在将 aurelia.json 添加到 vendor-bundle 的依赖项中:
Now add it aurelia.json in dependencies for vendor-bundle:
"dependencies": [
"aurelia-binding",
...
"jquery",
{
"name": "jquery-ui-dist",
"path": "../node_modules/jquery-ui-dist",
"main": "jquery-ui",
"deps": ["jquery"],
"resources": [
"jquery-ui.css"
]
},
]
注意我们首先加载 jquery.main"属性告诉它应该从该目录加载 jquery-ui.js.deps"属性告诉它它依赖于 jquery.最后,资源"属性包括默认的 jquery-ui.css.
Notice we are loading jquery first. The "main" attribute tells it that it should load jquery-ui.js from that directory. The "deps" attribute tells it that it is dependent on jquery. Finally the "resources" attribute includes the default jquery-ui.css.
现在在 app.html 中,确保需要 css 文件:
Now in app.html, be sure to require the css file:
<require from="jquery-ui-dist/jquery-ui.css"></require>
在 ts 文件中使用:
To use in a ts file:
import * as $ from 'jquery';
import 'jquery-ui-dist';
这篇关于如何在 Aurelia 中使用 JQuery-UI的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!