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

Question

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

提前致谢。

Answer 1

是的，有可能！

我已经为你制作了一个 jQueryUI Tabs 示例：

tabs.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 选项卡组件的样板 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() 将模板转换为 Tabs 组件。很简单吧？

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

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

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

就是这样！

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

PS：谢谢你的 plnkr，Sylvian，我用你的 fork 我的。

Answer 2

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

鉴于此templatenamed test.html：

<template>
  <div ref="content">test</div>
</template>

Test 自定义元素可以像这样操作引用为content 的div：

import {customElement, inject} from 'aurelia-framework';
import $ from 'jquery';

@customElement('test')
export class Test{

  attached(){
    $(this.content).css('color', 'red');
  }
}

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

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

在此处查看一个工作示例：http://plnkr.co/edit/SEB4NK?p=preview（请耐心等待，加载需要一点时间）。