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

Question

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.

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: https://github.com/aurelia/framework/issues/138. It has a reasonable example of how someone has handled this with the datepicker plugin. — Matthew James Davis, Jul 08 '15 at 18:11
I've written a blog that might interest you about integrating third party libraries into Aurelia here: http://davismj.me/blog/aurelia-drag-and-drop — Matthew James Davis, Jul 25 '16 at 15:53
I've written a blog about creating custom elements for wrapping css frameworks here: http://davismj.me/blog/semantic-custom-element/ — Matthew James Davis, Aug 02 '16 at 17:42

score 12 · Accepted Answer · answered Jul 24 '15 at 18:33

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/jquery@2.1.4",
"jquery-ui": "github:components/jqueryui@1.11.4",

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.

score 6 · Answer 2 · answered Jul 24 '15 at 01:38

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).

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

2 Answers2

Linked