如何在Aurelia中使用JQuery

如何在Aurelia中使用JQuery

本文介绍了如何在Aurelia中使用JQuery-UI的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用Aurelia CLI启动了一个新的Aurelia应用程序。

I started a new Aurelia app using the Aurelia CLI.

我安装了JQuery并使用Aurelia文档中的说明配置了aurelia.json:

I installed JQuery and configured aurelia.json using the instructions at the Aurelia documentation:

我已经安装了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

现在在vendor-bundle的依赖项中添加aurelia.json:

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。最后,resources属性包括默认的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文件中使用:

import * as $ from 'jquery';
import 'jquery-ui-dist';

这篇关于如何在Aurelia中使用JQuery-UI的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-25 23:08