Come utilizzare i componenti dell'interfaccia utente JQuery nell'app per iniziare Aurelia (app di navigazione)

Question

Sono in grado di eseguire l'app Aurelia seguendo i passaggi forniti nel tutorial iniziale. Hanno usato la barra di navigazione bootstrap nell'applicazione scheletro. È possibile utilizzare i componenti dell'interfaccia utente JQuery nell'app Aurelia. Se sì, per favore spiegami come ottenere questo.

Grazie in anticipo.

Answer 1

Sì, è possibile!

Ho fatto un jQueryUI Tabs esempio per voi:

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> 

Come potete vedere, ho copiato solo il codice HTML boilerplate delle schede jQueryUI componente, e ha creato la proprietà bindable tabs che è una matrice di oggetti del tipo: [{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(); 
    } 
} 

Il codice è abbastanza leggibile: ho importato jquery dal mio file config.js, e la mia jquery-ui da lì (solo le schede dei componenti, in modo da diventa più leggero). Quindi, ho iniettato il DOMElement nella mia classe, quindi ho potuto ottenere il suo id. Ho creato la mia proprietà bindable tabs. Nel mio costruttore, ottengo l'id DOMElement e popola la mia proprietà id. E, infine, sull'evento allegato (quando tutti i binding sono finiti), ho ottenuto l'oggetto jQuery dal mio id e ho chiamato il metodo tabs() per trasformare il modello in un componente Tabs. Piuttosto semplice, eh?

Nel mio file config.js, ho aggiunto queste due righe:

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

e quindi è possibile utilizzare il componente schede dove si vuole, chiamando in qualsiasi altro modello HTML del vostro progetto:

Questo è tutto!

si può vedere l'esempio di lavoro qui: http://plnkr.co/edit/ESxZA2jTlN7f6aiq1ixG?p=preview

PS: Grazie per questo plnkr, Sylvian, ho usato il vostro da forcella mia.

Answer 2

È possibile import e quindi utilizzare jquery sugli elementi DOM.

dato questo template chiamato test.html:

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

Un elemento personalizzato Test può manipolare il div riferimento come content come questo:

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

@customElement('test') 
export class Test{ 

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

Quindi è possibile utilizzare tale elemento personalizzato in qualsiasi vista utilizzando il Tag <test></test>.

Questo esempio utilizza la funzione css() ma è possibile importare qualsiasi plug-in e applicarli ai propri elementi.

Vedere un esempio operativo qui: http://plnkr.co/edit/SEB4NK?p=preview (pazienza ci vuole un po 'di tempo per caricare).