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

Question

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

提前致谢。

Answer 1

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

鉴于此 template 命名为 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（请耐心等待，加载需要一点时间）。

Answer 2

是的，有可能！

我为你制作了一个jQueryUITabs示例：

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 注入到我的 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",

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

就是这样！

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

PS: Thanks for that plnkr, Sylvian, I've used yours to fork mine.

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

How to use JQuery UI components in Aurelia getting started app (navigation app)

javascript

jquery

jquery-ui

aurelia