2016-11-28 14 views
6

Zacząłem nową aplikację Aurelia za pomocą interfejsu Aurelia CLI.Jak używać JQuery-UI z Aurelia

I zainstalowany i skonfigurowany aurelia.json JQuery korzystając z instrukcji w dokumentacji Aurelia:

http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/6

Potem NPM zainstalowane jQuery UI.

Teraz muszę wiedzieć, jak skonfigurować audelia.json do rozpoznawania jquery-ui.

W dokumentacji Aurelia to przykład podano, w jaki sposób odwoływać się do modułu:

"dependencies": [ 
    { 
    "name": "library-name", 
    "path": "../node_modules/library-name/dist/library-name" 
    } 
] 

Problem polega na tym, że w odróżnieniu od kiedy można pobrać bezpośrednio jQuery UI, moduł jquery-ui nie ma rzeczywistej Jquery -ui.js (jeśli nie mogę go znaleźć).

Dziękuję

+0

Ten moduł jest dla pojedynczego modułu plików, ale jQuery UI posiada wiele plików. Prawdopodobnie będziesz musiał użyć 'main' do zdefiniowania głównego pliku modułu, oprócz' name' i 'path'. Przewiń trochę w opublikowanym przez ciebie dokumencie doc Aurelii, a znajdziesz przykłady użycia "głównego" w "A CommonJS Package" i "A Legacy Library". –

+0

Wiem, ale nadal nie odpowiada na pytanie, jak to zrobić. – William

+0

Próbowałem zainstalować to także dzisiaj i nie mogłem go uruchomić. Byłbym zainteresowany rozwiązaniem. – LStarky

Odpowiedz

2

jquery-ui Pakiet nie obejmuje „zbudowany” wersję jQuery UI o ile mogę powiedzieć. W końcu udało mi się to zrobić przy użyciu pakietu jquery-ui-dist, który zawiera domyślne pliki jquery-ui.js i jquery-ui.css.

npm install jquery-ui-dist --save 

Teraz dodać aurelia.json w zależności od producentów wiązki:

"dependencies": [ 
     "aurelia-binding", 
     ... 
     "jquery", 
     { 
     "name": "jquery-ui-dist", 
     "path": "../node_modules/jquery-ui-dist", 
     "main": "jquery-ui", 
     "deps": ["jquery"], 
     "resources": [ 
      "jquery-ui.css" 
     ] 
     }, 
    ] 

Wskazówka jesteśmy najpierw ładuje jQuery. Atrybut "main" mówi, że powinien załadować plik jquery-ui.js z tego katalogu. Atrybut "deps" mówi, że jest zależny od jquery. Wreszcie atrybut "resources" zawiera domyślny jquery-ui.css.

Teraz w app.html, należy wymagać plik CSS:

<require from="jquery-ui-dist/jquery-ui.css"></require> 

do wykorzystania w pliku TS:

import * as $ from 'jquery'; 
import 'jquery-ui-dist'; 
0

Używam Aurelia 1.0.x, po aktualizacji Potrzebowałem tych dwóch importów do używania dowolnego widgetu jQuery-UI, w tym przypadku przeciągalnego. Działa również podczas importowania suwaka lub zmiany rozmiaru.

import $ from 'jquery'; 
import {draggable} from 'jquery-ui'; 

W moim package.json moi zależności jspm przedstawiają się następująco: Składnia odniesienia

"jquery": "npm:[email protected]^3.2.1", 
"jquery-ui": "github:components/[email protected]^1.12.1"