So verwenden Sie JQuery UI-Komponenten in Aurelia Erste Schritte-App (Navigations-App)

Question

Ich kann die Aurelia-App ausführen, indem ich die Schritte im Einstiegs-Tutorial befolge. Sie haben die Bootstrap-Navigationsleiste in der Skeleton-Anwendung verwendet. Ist es möglich, JQuery UI-Komponenten in der Aurelia App zu verwenden? Wenn ja, bitte erläutern Sie mir, wie Sie dies erreichen können.

Vielen Dank im Voraus.

Answer 1

Ja, das ist möglich!

Ich habe ein jQueryUI Tabs Beispiel für Sie gemacht:

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> 

Wie Sie sehen können, habe ich kopiert nur den Text HTML der jQueryUI Tabs Komponente, und erstellt die bindbare Eigenschaft tabs, die ein Array von Objekten wie folgt ist: [{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(); 
    } 
} 

Der Code ist ziemlich lesbar: Ich habe importiert jquery aus meiner config.js-Datei und meine jquery-ui von dort auch (nur die Komponenten-Tabs, so dass es wird leichter). Dann habe ich das DOMElement in meine Klasse injiziert, damit ich es ID bekommen kann. Ich habe meine bindbare Eigenschaft tabs erstellt. In meinem Konstruktor erhalte ich die DOMElement-ID und füllt meine ID-Eigenschaft auf. Und schließlich, auf dem angehängten Ereignis (wenn alle Bindungen beendet sind), habe ich das jQuery-Objekt von meiner ID und rief die Methode tabs() auf, um die Vorlage in eine Tabs-Komponente umzuwandeln. Ziemlich einfach, oder?

In meiner config.js Datei, habe ich diese zwei Zeilen hinzugefügt:

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

Und dann können Sie die Tabs Komponente verwenden, wo immer Sie wollen, ist es in jeder anderen HTML-Vorlage Ihres Projektes durch den Aufruf:

das ist es!

Sie können die Arbeitsbeispiel hier sehen: http://plnkr.co/edit/ESxZA2jTlN7f6aiq1ixG?p=preview

PS: Vielen Dank für das plnkr, Sylvian, die ich benutzt habe Ihnen meine gabeln.

Answer 2

Sie können import und dann jquery auf Ihre DOM-Elemente verwenden.

Given template diese test.html genannt:

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

A Test individuelle Element die div als content wie diese verwiesen manipulieren kann:

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

@customElement('test') 
export class Test{ 

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

Dann können Sie das benutzerdefinierte Element in allen Ansichten die Verwendung von <test></test> tag.

Dieses Beispiel verwendet die css() Funktion, aber Sie können jedes Plug-in importieren und auf Ihre Elemente anwenden.

Sehen Sie ein Arbeitsbeispiel hier: http://plnkr.co/edit/SEB4NK?p=preview (Geduld, es dauert eine Weile, um zu laden).