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

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

提前致谢。

是的，这是可能的！

我做了一个 jQueryUITabs给你的例子：

标签.html

<template>
    <ul>
      <li repeat.for="tab of tabs">
        <a href="${'#' + $parent.id + '-' + $index}">${tab.title}</a>
      </li>
    </ul>
    <div repeat.for="tab of tabs" id="${$parent.id + '-' + $index}">
      <p>${tab.text}</p>
    </div>
</template>

如您所见，我仅复制了 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 注入到我的类中，这样我就可以获得它的 id。我已经创建了我的可绑定属性tabs。在我的构造函数中，我获取 DOMElement id 并填充我的 id 属性。最后，在附加事件上（当所有绑定完成时），我从我的 id 中获取了 jQuery 对象，并调用了该方法tabs()将模板变成选项卡组件。很简单，嗯？

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

"jquery": "github:components/j[email protected]",
"jquery-ui": "github:components/[email protected]",

然后，您可以在任何需要的地方使用 Tabs 组件，方法是在项目的任何其他 HTML 模板中调用它：

就是这样！

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

PS：谢谢你的 plnkr，Sylvian，我用你的来分叉我的。