Jak korzystać z komponentów JQuery UI w aplikacji uruchomieniowej Aurelia (aplikacja do nawigacji)

Question

Jestem w stanie uruchomić aplikację Aurelia, wykonując czynności opisane w samouczku wprowadzającym. Użyli paska nawigacyjnego bootstrap w aplikacji szkieletowej. Czy można używać komponentów JQuery UI w aplikacji Aurelia. Jeśli tak, proszę wyjaśnić mi, jak to osiągnąć.

Z góry dziękuję.

Answer 1

Tak, jest to możliwe!

Zrobiłem jQueryUI Tabs dla was przykładem:

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> 

Jak widać, mam skopiowane tylko HTML szablonowe z kart jQueryUI składnik i utworzył właściwość bindable tabs, która jest tablicą takich obiektów: [{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(); 
    } 
} 

Kod jest dość czytelna: Mam jQuery importowane z mojego pliku config.js, a mój jquery-ui stamtąd też (tylko wypustki elementów, więc staje się jaśniejszy). Następnie wstrzyknąłem DOMElement do mojej klasy, aby uzyskać identyfikator. Stworzyłem moją właściwość bindable tabs. W moim konstruktorze otrzymuję identyfikator DOMElement i zapełniam moją właściwość id. I na koniec, na dołączonym zdarzeniu (gdy wszystkie powiązania są zakończone), mam obiekt jQuery z mojego identyfikatora i wywołałem metodę tabs(), aby przekształcić szablon w komponent Tabs. Całkiem proste, uh?

W moim pliku config.js, dodałem te dwa wiersze:

"jquery": "github:components/jquery@2.1.4", 
"jquery-ui": "github:components/jqueryui@1.11.4", 

a następnie można użyć komponentu Tabs gdziekolwiek chcesz, nazywając go w jakikolwiek inny szablon HTML projektu:

to jest to!

można zobaczyć na przykładzie pracy tutaj: http://plnkr.co/edit/ESxZA2jTlN7f6aiq1ixG?p=preview

PS: Dzięki za tym plnkr, Sylvian, Użyłem twoje widelec kopalni.

Answer 2

Możesz import, a następnie użyj jquery na elementach DOM.

Biorąc to template nazwie test.html:

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

Test niestandardowy element może manipulować odwołanie div jak content jak ten:

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

@customElement('test') 
export class Test{ 

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

Następnie można użyć tego elementu niestandardowego w dowolnym widoku za pomocą <test></test> tag.

Ten przykład wykorzystuje funkcję css(), ale można zaimportować dowolną wtyczkę i zastosować ją do swoich elementów.

Zobacz przykład pracy tutaj: http://plnkr.co/edit/SEB4NK?p=preview (bądź cierpliwy, aby załadować trochę czasu).