问题描述:

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.

网友答案:

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

相关阅读:
Top