I am able to run the Aurelia app by following the steps provided in getting started tutorial. They have used bootstrap nav-bar in the skeleton application. Is it possible to use JQuery UI components in the Aurelia app. If yes, please explain me how to achieve this.

Thanks in advance.

I am able to run the Aurelia app by following the steps provided in getting started tutorial. They have used bootstrap nav-bar in the skeleton application. Is it possible to use JQuery UI components in the Aurelia app. If yes, please explain me how to achieve this.

Thanks in advance.

• javascript
• jquery
• jquery-ui
• aurelia

• Please hold. This is a good question and I couldn't find a good write up on how to do this. In the mean time, please review the bug report here: github.com/aurelia/framework/issues/138. It has a reasonable example of how someone has handled this with the datepicker plugin. – Matthew James Davis Commented Jul 8, 2015 at 18:11
• I've written a blog that might interest you about integrating third party libraries into Aurelia here: davismj.me/blog/aurelia-drag-and-drop – Matthew James Davis Commented Jul 25, 2016 at 15:53
• I've written a blog about creating custom elements for wrapping css frameworks here: davismj.me/blog/semantic-custom-element – Matthew James Davis Commented Aug 2, 2016 at 17:42

2 Answers 2

Yes, it's possible!

I've made a jQueryUI Tabs example for you:

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>

As you can see, I've only copied the boilerplate HTML of the jQueryUI Tabs component, and created the bindable property tabswhich is an Array of Objects like that: [{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();
  }
}

The code is pretty readable: I've imported jquery from my config.js file, and my jquery-ui from there too (only the component tabs, so it gets lighter). Then, I've injected the DOMElement to my class, so I could get it's id. I've created my bindable property tabs. In my constructor, I get the DOMElement id and populates my id property. And, finally, on the attached event (when all the binds are finished), I've got the jQuery object from my id, and called the method tabs() to turn the template into a Tabs component. Pretty simple, uh?

In my config.js file, I've added those two lines:

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

And then you can use the Tabs component wherever you want, by calling it in any other HTML template of your project:

That's it!

You can see the working example here: http://plnkr.co/edit/ESxZA2jTlN7f6aiq1ixG?p=preview

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

You can import and then use jquery on your DOM elements.

Given this templatenamed test.html:

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

A Test custom element can manipulate the div referenced as content like this:

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

@customElement('test')
export class Test{

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

Then you can use that custom element in any view using the <test></test> tag.

This exemple uses the css() function but you can import any plug-in and apply them to your elements.

See a working example here: http://plnkr.co/edit/SEB4NK?p=preview (be patient it takes a little while to load).