Jak převzít hodnotu url.path v komponentě Joystick a převést ji do uživatelského rozhraní dynamického drobečku.
Začínáme
Pro tento tutoriál použijeme full-stack JavaScriptový framework CheatCode, Joystick. Joystick spojuje rozhraní front-end UI s back-endem Node.js pro vytváření aplikací.
Pro začátek budeme chtít nainstalovat Joystick přes NPM. Před instalací se ujistěte, že používáte Node.js 16+, abyste zajistili kompatibilitu (pokud se potřebujete naučit, jak nainstalovat Node.js nebo spustit více verzí na vašem počítači, přečtěte si nejprve tento tutoriál):
Terminál
npm i -g @joystick.js/cli
Tím se Joystick nainstaluje globálně do vašeho počítače. Po instalaci vytvořte nový projekt:
Terminál
joystick create app
Po několika sekundách se zobrazí zpráva o odhlášení na cd do nového projektu a spusťte joystick start :
Terminál
cd app && joystick start
Poté by vaše aplikace měla být spuštěna a my jsme připraveni začít.
Přidání vnořených tras
Abychom mohli demonstrovat uživatelské rozhraní drobečkové navigace, budeme potřebovat sadu vnořených tras, se kterými můžeme pracovat. Aby to bylo jednoduché, začněme otevřením index.server.js soubor v kořenovém adresáři projektu, který jsme právě vytvořili, a přidejte několik tras:
Terminál
import node from "@joystick.js/node";
import api from "./api";
node.app({
api,
routes: {
"/": (req, res) => {
res.render("ui/pages/index/index.js", {
layout: "ui/layouts/app/index.js",
});
},
"/nested": (req, res) => {
res.render("ui/pages/index/index.js", {
layout: "ui/layouts/app/index.js",
});
},
"/nested/path": (req, res) => {
res.render("ui/pages/index/index.js", {
layout: "ui/layouts/app/index.js",
});
},
"/nested/path/to": (req, res) => {
res.render("ui/pages/index/index.js", {
layout: "ui/layouts/app/index.js",
});
},
"/nested/path/to/:thing": (req, res) => {
res.render("ui/pages/index/index.js", {
layout: "ui/layouts/app/index.js",
});
},
"*": (req, res) => {
res.render("ui/pages/error/index.js", {
layout: "ui/layouts/app/index.js",
props: {
statusCode: 404,
},
});
},
},
});
V aplikaci, kterou jsme právě vytvořili, index.server.js soubor je hlavním "startovacím bodem" pro server naší aplikace. Uvnitř voláme na node.app() funkce z @joystick.js/node balíček ke spuštění našeho serveru a předání mu API, které chceme, aby načetl, a tras, které chceme mít k dispozici v naší aplikaci.
Na co se zde chceme zaměřit, je routes a konkrétně všechny trasy, které jsme přidali počínaje /nested . Zde vytváříme pseudovnořený vzor adresy URL, který můžeme použít k otestování našeho kódu pro generování drobečkové navigace.
Pro každý /nested route, uděláme přesně to samé:vykreslíme index komponenta stránky (právě jsme zkopírovali a vložili obsah / funkce zpětného volání trasy pro každé /nested trasa). Rozdíl mezi nimi je samotná cesta. Všimněte si, že u každé trasy, kterou jsme přidali, jdeme o další úroveň hlouběji:
/nested/nested/path/nested/path/to/nested/path/to/:thing
Konečným cílem je, že s touto strukturou nyní máme vnořenou sadu tras, které můžeme snadno reprezentovat jako strouhanku.
Dále chceme upravit /ui/pages/index/index.js soubor, který zde vykreslujeme, abychom vytvořili naše uživatelské rozhraní pro drobečky.
Přidání dynamického generátoru drobečkové navigace
Když jsme vytvořili naši aplikaci s joystick create app dříve jsme také dostali ukázkovou komponentu stránky na /ui/pages/index/index.js . Nyní to otevřeme a nahradíme stávající obsah komponentou kostry, kterou můžeme použít k vytvoření našeho uživatelského rozhraní drobečkové navigace.
/ui/pages/index/index.js
import ui from '@joystick.js/ui';
const Index = ui.component({
render: () => {
return `
<div>
</div>
`;
},
});
export default Index;
Když je to na místě, první věc, kterou chceme udělat, je zapojit vlastní vytváření našich drobečků a pak se zaměřit na jejich vykreslení na stránku. Abychom toho dosáhli, budeme se spoléhat na methods vlastnost komponenty joysticku.
/ui/pages/index/index.js
import ui from '@joystick.js/ui';
const Index = ui.component({
methods: {
getBreadcrumbs: (component) => {
// We'll build our breadcrumbs array here...
},
},
render: () => {
return `
<div>
</div>
`;
},
});
export default Index;
V komponentě Joystick obsahuje vlastnost metody objekt různých metod (jiný název pro funkce definované na objektu v JavaScriptu) související s naší komponentou. Nyní chceme definovat funkci getBreadcrumbs() který provede těžkou práci při převodu naší cesty URL na pole objektů, které popisují každou drobenku, kterou chceme vykreslit.
/ui/pages/index/index.js
import ui from '@joystick.js/ui';
const Index = ui.component({
methods: {
getBreadcrumbs: (component) => {
const pathParts = component?.url?.path?.split('/').filter((part) => part?.trim() !== '');
return pathParts?.map((part, partIndex) => {
const previousParts = pathParts.slice(0, partIndex);
return {
label: part,
href: previousParts?.length > 0 ? `/${previousParts?.join('/')}/${part}` : `/${part}`,
};
}) || [];
},
},
render: () => {
return `
<div>
</div>
`;
},
});
export default Index;
Kvůli přehlednosti jsme sem vložili celý kód, takže si to pojďme projít. Za prvé, naším cílem je umět volat tuto funkci getBreadcrumbs a nechat jej vrátit pole objektů, kde každý objekt popisuje jednu z našich drobečků.
Abychom se tam dostali, potřebujeme získat aktuální cestu, na kterou se náš uživatel dívá. V naší aplikaci máme dvě možnosti, obě jsou stejně snadné. Za prvé, nativně ve webovém prohlížeči můžeme vždy získat aktuální cestu pomocí window.location.pathname globální hodnota (location.pathname ve zkratce). Protože pracujeme v rámci aplikace Joystick, budeme zde používat url.path hodnota (která je totožná s location.pathname ) dostupné v naší instanci komponenty.
Všimnete si, že když definujete metodu na komponentě Joystick, pokud této funkci nejsou předány žádné argumenty, když ji voláme, Joystick automaticky přiřadí instanci komponenty poslední možný argument. Pokud bychom například zavolali methods.getBreadcrumbs('something') , podpis funkce výše by se změnil na getBreadcrumbs: (someValue, component) => { ... } .
Uvnitř naší funkce, z component například získáme aktuální cestu pomocí component.url.path jako struna. Abychom se dostali k poli, musíme nejprve rozdělit cestu na části. K tomu potřebujeme použít .split() funkce dostupná pro všechny řetězce v JavaScriptu. Na .split() , můžeme předat znak, který chceme rozdělit na . Protože máme co do činění s cestou jako /nested/path/to/123 chceme rozdělit na / znak lomítka. Konečným výsledkem je pole jako toto:
['', 'nested', 'path', 'to', '123']
Tím se dostaneme k většině cesty, ale všimněte si, že je zde prázdný řetězec. To proto, že když jsme udělali .split('/') , bylo započítáno první lomítko, ale protože před ním nic není, dostaneme pouze prázdnou hodnotu.
Chcete-li to zvládnout, všimněte si, že zde je celý řádek:
const pathParts = component?.url?.path?.split('/').filter((part) => part?.trim() !== '');
To říká, že „vezměte url.path hodnotu jako řetězec, rozdělte jej do pole pomocí / lomítko jako oddělovač a poté odfiltrujte libovolnou část ve výsledném poli, pokud oříznutí všech jeho mezer povede k prázdnému řetězci."
Konečný výsledek? Získáme čisté pole, se kterým můžeme pracovat jako ['nested', 'path', 'to', '123'] v našem pathParts proměnná.
S tímto polem máme to, co potřebujeme k vybudování naší strouhanky. Dále musíme toto pole zmapovat. Pro každou iteraci chceme udělat práci nezbytnou k vytvoření našeho drobečkového objektu. Každá drobenka bude mít dvě vlastnosti:label což je vykreslený název, který uživatelé uvidí v řetězci drobečkové navigace a href což je adresa URL, na kterou bude drobenka propojena.
Pro label , naše práce je snadná:jen znovu použijeme název cesty part právě přecházíme. href je trochu složitější. Zde se musíme ujistit, že každá následná drobenka ví, co před ní bylo, takže když na ni klikneme, odkazujeme na správnou adresu URL.
Za tímto účelem jsme přímo do naší mapy přidali novou proměnnou previousParts což trvá našich pathParts pole a volá .slice() metodu na něm se slovy "dej mi vše od prvního prvku v poli až po index aktuální části." Jinými slovy, vrátí nám to nové pole se vším, co bylo před aktuálním part .
Dole na objektu, který se vracíme z našeho .map() použijeme ternární operátor k nastavení hodnoty href v závislosti na délce previousParts pole. Pokud je délka 0 , jsme na začátku naší cesty, takže nejsou k dispozici žádné předchozí díly k renderování. Pokud je to tento případ, vrátíme pouze href jako /${part} .
Pokud existují previousParts , používáme .join() metoda na tomto poli pro převedení pole zpět na řetězec, zřetězení výsledného řetězce spolu s názvem aktuálního part . Konečný výsledek? Pro každou iteraci dostaneme něco takového:
{ label: 'nested', href: '/nested' }
{ label: 'path', href: '/nested/path' }
{ label: 'to', href: '/nested/path/to' }
{ label: '123', href: '/nested/path/to/123' }
To je vše pro získání naše strouhanka. Nyní je necháme vykreslit na stránku.
/ui/pages/index/index.js
import ui from '@joystick.js/ui';
const Index = ui.component({
methods: {
getBreadcrumbs: (component) => { ... },
},
css: `
.breadcrumbs {
display: flex;
}
.breadcrumbs li {
list-style: none;
}
.breadcrumbs li:before {
content: "/";
display: inline-flex;
margin-right: 10px;
}
.breadcrumbs li:not(:last-child) {
margin-right: 10px;
}
`,
render: ({ when, each, methods }) => {
const breadcrumbs = methods.getBreadcrumbs();
return `
<div>
${when(breadcrumbs?.length > 0, `
<ul class="breadcrumbs">
${each(breadcrumbs, (breadcrumb) => {
return `
<li><a href="${breadcrumb?.href}">${breadcrumb?.label}</a></li>
`;
})}
</ul>
`)}
</div>
`;
},
});
export default Index;
Část, které chceme věnovat pozornost, je dole v render() funkce. Zde jsme zaměnili vykreslování našeho prázdného <div></div> s naší strouhankou.
Na naše render() předpokládáme, že nám Joystick předá objekt představující aktuální instanci komponenty. Místo psaní render: (component) => {} zde používáme destrukci JavaScriptu, abychom „vytrhli“ konkrétní proměnné, které z tohoto objektu chceme. Takže místo psaní component.when , component.each , atd., stačí napsat when , each a methods (ukazuje na stejné vlastnosti pomocí zkratky).
Pomocí methods vlastnost z tohoto, právě uvnitř render() , zavoláme na methods.getBreadcrumbs() uložení výsledku (naše pole strukturovaných objektů) do proměnné breadcrumbs . S tímto polem dále použijeme when() funkce render v joysticku, která nám umožňuje podmíněně vykreslit nějaké HTML, když první hodnota, kterou funkci předáme, je true .
Zde chceme vrátit řetězec HTML, který vykreslí <ul></ul> (představuje náš seznam strouhanky). Uvnitř toho <ul></ul> k vykreslení každé drobečky používáme each() vykreslovací funkci řekněme za předpokladu, že pole předané jako první argument, pro každou položku v tomto poli zavolejte funkci předanou jako druhý argument.
Od této funkce očekáváme, že obdržíme každou položku v poli, které jsme předali each , nebo jeden z našich breadcrumb objektů. Uvnitř funkce Joystick očekává, že vrátíme řetězec HTML pro každou iteraci breadcrumbs pole. Protože jsme uvnitř <ul></ul> pro každou drobenku chceme vykreslit <li></li> tag s <a></a> tag uvnitř něj. Odtud už jen používáme obyčejnou interpolaci JavaScriptu k předání hodnoty našeho href a label z aktuálního breadcrumb objekt.
A je to! Nahoru jsme přidali css nemovitost s jednoduchým stylem pro úklid. Pokud otevřeme prohlížeč a přejdeme mezi našimi vnořenými trasami, měli bychom vidět, že se naše drobečky dynamicky aktualizují.
Zabalit
V tomto tutoriálu jsme se naučili, jak nastavit některé vnořené trasy v aplikaci Joystick. Poté jsme se naučili, jak vytvořit komponentu Joystick, která zvolila aktuální cestu, a převedla ji na pole drobečkových objektů, které jsme mohli použít pro vykreslování v našem uživatelském rozhraní. Nakonec jsme se naučili, jak podmíněně vykreslovat naše drobečky v našem uživatelském rozhraní pomocí when joysticku a each vykreslovací funkce.