Axette – Minimal AJAX setup pro Nette bez dependencí (žádné jQuery)

před 3 lety
matronator
Člen | 38
+
+14
-

Axette

Jednoduchý AJAX pro Nette bez dependencí. Axette = AJAX pro Nette!

https://www.npmjs.com/package/axette
https://github.com/…nator/axette

Features
  • Žádné dependence
  • Zpracuje odkazy i formuláře (<a> a <form> tagy) přes AJAX
  • Rychlé překreslování snippetů
  • Zpracuje jak překreslení snippetů ($this->redrawControl()) tak i přesměrování ($this->redirect())
  • Jednoduchý na použití
    • Stačí importovat/vložit <script> tag, zavolat axette.init() a máte hotovo!
  • Umí se zbavit ?_fid=6ge7 v URL, které Nette přidá při použití Flash zpráv
  • Možnost navěsit vlastní callbacky na onAjax event
Instalace
npm i axette

Nebo pomocí <script> tagu

<script src="https://unpkg.com/axette@latest/dist/axette.min.js"></script>

Nebo také můžete stáhnout nejnovější release a načíst axette.min.js nebo axette.js lokálně.

Použití

Stačí pouze přidat třídu odkazům nebo formulářům, které chcete zpracovat přes AJAX

HTML/Latte:

<a n:href="update!" class="ajax">Překreslit snippety</a>

A zavolat metodu axette.init()

JavaScript:

import axette from "axette" // Import je nutný pouze při instalaci přes npm/yarn

axette.init()

Automaticky updatuje snippety překreslené přes redrawControl(), nebo pokud se zavolá redirect() přesměruje na novou stránku.

Více info

Více informací a podrobnější dokumentaci s dalšími příklady najdete buď na GitHubu, nebo na npmjs.

Editoval matronator (22. 6. 2021 3:45)

před 3 lety
dms
Člen | 93
+
0
-

Nechci moc rejpat, ale další js knihovna na ajax? Jinak přímo v nette dokumentaci je odkaz na https://naja.js.org/ a https://www.nittro.org/ které dependence na jQuery neobsahují a Naja je dostatečně lightweight a poměrně i odzkoušená x uživateli.

před 3 lety
Felix
Nette Core | 1196
+
+2
-

@matronator Dobra prace.

@dms Je fajn, ze vznikaji nove projekty.

před 3 lety
Lumeriol
Generous Backer | 62
+
+3
-

dms napsal(a):

Nechci moc rejpat, ale další js knihovna na ajax? Jinak přímo v nette dokumentaci je odkaz na https://naja.js.org/ a https://www.nittro.org/ které dependence na jQuery neobsahují a Naja je dostatečně lightweight a poměrně i odzkoušená x uživateli.

Upřímně řečeno, Nittro jakožto obří knihovna s obsluhou spousty dalších záležitostí se takřka nerozvíjí už několik let, Naju bohužel považují mnozí za složitou, a to asi hlavně z důvodu, že s javascriptem nejsou úplně přátelé a jelikož nemá mnoho příkladů, i když @jiripudil ti odpoví téměř na jakýkoliv dotaz.

Axette, pokud se dobře uchopí, by mohlo být příjemný spojovací mezičlánek pro ty, co budou přecházet ze stařičkého nette.ajax a ještě pořád se nebudou cítit na Naju.

před 3 lety
stepos2
Člen | 53
+
0
-

Lumeriol napsal(a):

Naju bohužel považují mnozí za složitou, a to asi hlavně z důvodu, že s javascriptem nejsou úplně přátelé a jelikož nemá mnoho příkladů. Axette, pokud se dobře uchopí, by mohlo být příjemný spojovací mezičlánek pro ty, co budou přecházet ze stařičkého nette.ajax a ještě pořád se nebudou cítit na Naju.

Není důvod se necítit na Naju. V quick startu Naja najdu úplně to samé jako tady a je tam i odkaz na příklad.

(To jenom pro upřesnění, nic proti tomuhle projektu.)

před 3 lety
dms
Člen | 93
+
0
-

Já to také nemyslel špatně. Samozřejmě, že je dobré když vznikají nové projekty. Nittro za mě také nepoužívám kvůli velikosti a složitosti, ale Naja mi přijde že řeší totéž co zde zmíněné a hlavně je již prověřená, protože se o ní Jirka stará a vlastně je také hodně lightweight.

před 3 lety
Kamil Valenta
Člen | 815
+
+1
-

S příchodem Nette také nepadl ZF, Laravel apod, přestože v obrysech řeší totéž. Možnost volby není na škodu.

před 3 lety
Michalek
Člen | 211
+
+4
-

Já to megalajkuju. Po x letech jsem hledal ajax pro malinkou nette aplikaci a trošku mě ty nové knihovny zarazily. Respektive zastavily. Chci přilinkovat jeden JS, bez npm, composeru a kdo ví čeho ještě, a o víc se nestarat :-)

Takže já moc děkuju.

před 2 lety
matronator
Člen | 38
+
+9
-

Chtěl bych oznámit, že včera jsem releasnul verzi 2.0, která obsahuje nějaké nové featury a další změny.

  • Nyní můžete použít jakýkoliv CSS selektor pro odkazy a formy které mají jít přes AJAX (např. data atributy) a ne pouze classy.
  • Dále se změnily hooky a eventy na které jdou navázat listenery. Místo onAjax a onInit jsou nyní eventy beforeInit, afterInit a beforeAjax, afterAjax. Hooky jdou nyní také odebírat pomocí metody off().
  • Nově byla přidána také metoda sendRequest(), která je takový wrapper okolo klasické fetch() funkce, ale s tím že po zavolání se automaticky překreslí snippety, což doteď s obyčejným fetch nebo XMLHttpRequest nešlo.

Veškeré změny najdete na GitHubu projektu: https://github.com/…nator/axette