Sådan tager du værdien af ​​URL.Path i en joystick -komponent og konverterer den til en dynamisk brødcumb -brugergrænseflade.

Kom godt i gang

Til denne tutorial skal vi bruge CheatCodes full-stack JavaScript-ramme, Joystick. Joystick samler en frontend UI-ramme med en Node.js-backend til at bygge apps.

Til at begynde med vil vi installere Joystick via NPM. Sørg for, at du bruger Node.js 16+ før installation for at sikre kompatibilitet (læs denne vejledning først, hvis du har brug for at lære, hvordan du installerer Node.js eller kører flere versioner på din computer):

Terminal

npm i -g @joystick.js/cli

Dette vil installere Joystick globalt på din computer. Når det er installeret, lad os derefter oprette et nyt projekt:

Terminal

joystick create app

Efter et par sekunder vil du se en meddelelse, der er logget ud til 00 ind i dit nye projekt og kør 14 :

Terminal

cd app && joystick start

Herefter skulle din app køre, og vi er klar til at komme i gang.

Tilføjelse af indlejrede ruter

For at demonstrere en brødkrumme UI har vi brug for et sæt indlejrede ruter, vi kan arbejde med. For at holde tingene enkle, lad os starte med at åbne 26 Fil ved roden af ​​det projekt, vi lige har oprettet, og tilføj et par ruter:

Terminal

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,
        },
      });
    },
  },
});

I den app, vi lige har oprettet, er 39 Fil er det vigtigste "udgangspunkt" for vores applikations server. Indeni kalder vi til 46 funktion fra 59 Pakke til at starte vores server, videregive den API, vi ønsker, at den skal indlæses, og de ruter, vi ønsker, tilgængelige i vores app.

Hvad vi vil fokusere på her er 66 , og specifikt alle de ruter, vi har tilføjet, starter med 77 . Her opretter vi et pseudo-nestet URL-mønster, som vi kan bruge til at teste vores brødkrumme generationskode.

For hver 82 Rute, vi gør nøjagtigt den samme ting:gengiv 90 sidekomponent (vi har lige kopieret og indsat indholdet af 109 rutens tilbagekaldsfunktion for hver 118 rute). Forskellen mellem hver er selve stien. Bemærk, at for hver rute, vi har tilføjet, går vi et ekstra niveau dybere:

• 122
• 131
• 145
• 150

Slutmålet er, at vi med denne struktur nu har et indlejret sæt ruter, som vi nemt kan repræsentere som brødkrummer.

Dernæst ønsker vi at ændre 164 fil, vi gengiver her for at opbygge vores breadcrumbs UI.

Tilføjelse af en dynamisk brødkrummegenerator

Da vi oprettede vores app med 176 tidligere fik vi også en eksempelsidekomponent på 185 . Lad os nu åbne det op og erstatte det eksisterende indhold med en skeletkomponent, som vi kan bruge til at opbygge vores breadcrumb-brugergrænseflade.

/ui/pages/index/index.js

import ui from '@joystick.js/ui';

const Index = ui.component({
  render: () => {
    return `
      <div>
      </div>
    `;
  },
});

export default Index;

Med det på plads er den første ting, vi ønsker at gøre, at oprette den faktiske skabelse af vores brødkrummer og derefter fokusere på at gengive dem til siden. For at gøre dette vil vi stole på 197 egenskab for en Joystick-komponent.

/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;

I en Joystick-komponent indeholder methods-egenskaben et objekt med diverse metoder (et andet navn for funktioner defineret på et objekt i JavaScript) relateret til vores komponent. Det, vi vil gøre nu, er at definere en funktion 208 som vil udføre det tunge løft for at konvertere vores URL-sti til en række objekter, som beskriver hver brødkrumme, vi ønsker at gengive.

/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;

Vi har dumpet hele koden her for klarhedens skyld, så lad os gå igennem det. For det første er vores mål at kunne kalde denne funktion 210 og få det til at returnere en række genstande til os, hvor hvert objekt beskriver en af ​​vores brødkrummer.

For at nå dertil skal vi få den aktuelle vej, vores bruger ser på. Vi har to muligheder for dette i vores app, begge lige nemme. For det første, indbygget i en webbrowser, kan vi altid få den aktuelle sti via 225 global værdi (235 for kort). Fordi vi arbejder i en Joystick-app, skal vi her bruge 247 værdi (som er identisk med 259 ) tilgængelig på vores komponentinstans.

Du vil bemærke, at når du definerer en metode på en Joystick-komponent, hvis ingen argumenter sendes til den funktion, når vi kalder den, vil Joystick automatisk tildele det sidst mulige argument til komponentforekomsten. For eksempel, hvis vi kaldte 268 , vil funktionssignaturen ovenfor ændres til 273 .

Inde i vores funktion, fra 286 for eksempel får vi den aktuelle sti med 290 som en snor. For at komme til et array skal vi først opdele vores vej i dele. For at gøre det skal vi bruge 304 funktion tilgængelig på alle strenge i JavaScript. Til 317 , kan vi videregive en karakter, som vi vil dele ved . Fordi vi har at gøre med en sti som 326 vi ønsker at opdele ved 334 fremad skråstreg. Slutresultatet er et array som dette:

['', 'nested', 'path', 'to', '123']

Dette får os det meste af vejen, men bemærk, at der er en tom streng her. Det er fordi, da vi lavede en 340 , den første skråstreg blev talt, men fordi der ikke er noget forud for den, får vi bare en tom værdi.

For at håndtere dette skal du bemærke, at hele linjen her er:

const pathParts = component?.url?.path?.split('/').filter((part) => part?.trim() !== '');

Hvad dette siger er "tag 352 værdi som en streng, opdel den i en matrix ved hjælp af 362 skråstreg frem som en separator, og filtrer derefter enhver del i det resulterende array fra, hvis trimning af hele dets mellemrum resulterer i en tom streng."

Slutresultatet? Vi får et rent array at arbejde med som 372 i vores 383 variabel.

Med dette array har vi det, vi skal bruge for at bygge vores brødkrummer ud. Dernæst skal vi kortlægge dette array. For hver iteration ønsker vi at udføre det nødvendige arbejde for at bygge vores brødkrummeobjekt. Hver brødkrumme vil have to egenskaber:390 hvilket er det gengivne navn, som brugerne vil se i brødkrummekæden og 409 som er den URL, brødkrumme vil blive linket til.

For 410 , vores arbejde er nemt:vi genbruger bare navnet på stien 426 vi er i gang for tiden. 438 er lidt sværere. Her skal vi sikre os, at hver efterfølgende brødkrumme er klar over, hvad der kom før den, så når vi klikker på den, henviser vi til den korrekte URL.

For at gøre det, lige inde på vores kort har vi tilføjet en ny variabel 448 som tager vores 451 array og kalder 462 metode på det, og siger "giv mig alt fra det første element i arrayet op til den aktuelle dels indeks." Med andre ord vil dette returnere os en ny array med alt, der kom før den nuværende 473 .

Nede på objektet vender vi tilbage fra vores 481 vi bruger en ternær operator til at indstille værdien af ​​496 afhængigt af længden af ​​509 array. Hvis længden er 517 , vi er ved begyndelsen af ​​vores vej, og så der er ingen tidligere dele at gengive. Hvis dette er tilfældet, returnerer vi bare 524 som 531 .

Hvis der er 541 , bruger vi 555 metode på det array for at konvertere arrayet tilbage til en streng ved at sammenkæde den resulterende streng med navnet på den aktuelle 561 . Slutresultatet? For hver iteration får vi noget som dette:

{ label: 'nested', href: '/nested' }
{ label: 'path', href: '/nested/path' }
{ label: 'to', href: '/nested/path/to' }
{ label: '123', href: '/nested/path/to/123' }

Det er det for at få vores brødkrummer. Lad os nu få dem gengivet til siden.

/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;

Den del, vi vil være opmærksom på, er nede i 572 fungere. Her har vi byttet gengivelsen af ​​vores tomme 584 med vores brødkrummer.

Til vores 596 funktion, forventer vi, at Joystick vil sende os et objekt, der repræsenterer den aktuelle komponentinstans. I stedet for at skrive 600 her bruger vi JavaScript-destrukturering til at "plukke" de specifikke variabler, vi ønsker fra det objekt. Så i stedet for at skrive 613 , 620 osv., kan vi bare skrive 638 , 643 og 657 (peger på de samme egenskaber ved hjælp af stenografi).

Brug af 667 egenskab fra denne, lige inden for 672 , ringer vi til 689 lagring af resultatet (vores række af brødkrummeobjekter) i en variabel 692 . Med dette array bruger vi derefter 709 render-funktion i Joystick, som giver os mulighed for betinget at gengive noget HTML, når den første værdi, vi sender til funktionen, er 710 .

Her ønsker vi at returnere en streng HTML, som gengiver en 725 (repræsenterer vores liste over brødkrummer). Inden i den 730 For at gengive hver brødkrumme bruger vi 742 render funktion for at sige givet arrayet, der er sendt som det første argument, kalder du for hvert element i det array funktionen, der er bestået som det andet argument.

Til den funktion forventer vi at modtage hvert element i det array, vi har sendt til 751 , eller en af ​​vores 765 genstande. Inde i funktionen forventer Joystick, at vi returnerer en streng HTML for hver iteration af 774 array. Fordi vi er inde i en 789 tag, for hver brødkrumme, vi ønsker at gengive en 793 tag med en 808 tag inde i den. Derfra bruger vi bare almindelig JavaScript-interpolation til at videregive værdien af ​​vores 816 og 825 fra den nuværende 838 objekt.

Det er det! Ovenpå har vi tilføjet en 841 ejendom med noget simpelt design til at rydde op i. Hvis vi åbner en browser og skifter mellem vores indlejrede ruter, bør vi se vores brødkrummer opdateres dynamisk.

Afslutning

I denne øvelse lærte vi, hvordan man opsætter nogle indlejrede ruter i en Joystick-app. Derefter lærte vi, hvordan man opretter en Joystick-komponent, der tog den aktuelle sti, og konverterede den til en række brødkrummeobjekter, som vi kunne bruge til gengivelse i vores brugergrænseflade. Endelig lærte vi, hvordan vi betinget gengiver vores brødkrummer i vores brugergrænseflade ved hjælp af Joystick's 854 og 868 render-funktioner.