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

Question

我可以按照入门教程中提供的步骤运行Aurelia应用程序.他们在骨架应用程序中使用了bootstrap nav-bar.是否可以在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 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()将模板转换为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:

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

一个Test自定义元素可以操纵div引用为content这样的:

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(请耐心等待加载需要一段时间).