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

我可以按照入门教程中提供的步骤运行Aurelia应用程序.他们在骨架应用程序中使用了bootstrap nav-bar.可以在Aurelia应用程序中使用 JQuery UI组件.如果是,请说明如何实现这一点.

提前致谢.

解决方法

是的,这是可能的！

我为您制作了一个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,并创建了一个可绑定的属性选项卡,它是一个像这样的对象数组：[{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.我创建了我的可绑定属性选项卡.在我的构造函数中,我得到了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.