如何在Aurelia入门应用程序（导航应用程序）中使用JQuery UI组件

我可以按照入门教程中提供的步骤运行Aurelia应用程序。 他们在骨架应用程序中使用了bootstrap nav-bar。 是否可以在Aurelia应用程序中使用JQuery UI组件。 如果是，请解释我如何实现这一目标。

提前致谢。

Answer 1

是的，这是可能的！

我为你做了一个jQueryUI Tabs示例：

tabs.html

如您所见，我只复制了jQueryUI Tabs组件的样板HTML，并创建了可绑定属性tabs ，它是一个像这样的对象数组： [{title: "", text: ""}] 。

tabs.js

 import {bindable, inject} from 'aurelia-framework'; import $ from 'jquery'; import {tabs} from 'jquery-ui'; @inject(Element) export class Tab { @bindable tabs = null; constructor(el) { this.id = el.id; } attached() { $(`#${this.id}`).tabs(); } } 

代码非常易读：我从我的config.js文件中导入了jquery，并从那里导入了jquery-ui（只有组件选项卡，所以它变轻了）。 然后，我已经将DOMElement注入我的class级，所以我可以得到它的ID。 我已经创建了我的可绑定属性tabs 。 在我的构造函数中，我获取DOMElement id并填充我的id属性。 最后，在附加事件（当所有绑定完成时），我从我的id获得了jQuery对象，并调用方法tabs()将模板转换为Tabs组件。 很简单，呃？

在我的config.js文件中，我添加了这两行：

 "jquery": "github:components/jquery@2.1.4", "jquery-ui": "github:components/jqueryui@1.11.4", 

然后，您可以通过在项目的任何其他HTML模板中调用Tabs组件来随意使用它：

而已！

您可以在此处查看工作示例： http ： //plnkr.co/edit/ESxZA2jTlN7f6aiq1ixG？p = preview

PS：谢谢那个plnkr，Sylvian，我用你的叉子来挖我的。

Answer 2

您可以import然后在DOM元素上使用jquery。

鉴于此template名为test.html ：

Test自定义元素可以操作引用为content的div ，如下所示：

 import {customElement, inject} from 'aurelia-framework'; import $ from 'jquery'; @customElement('test') export class Test{ attached(){ $(this.content).css('color', 'red'); } } 

然后，您可以使用标记在任何视图中使用该自定义元素。

此示例使用css()函数，但您可以导入任何插件并将其应用于您的元素。

请参阅此处的工作示例： http ： //plnkr.co/edit/SEB4NK？p = preview （请耐心等待加载需要一段时间）。