13 z najlepších rámcov JavaScriptu, ktoré môžete vyskúšať

Strana 5 z 6: Aurelia

Rámce JavaScript: logo Aurelia

Najlepšie pre:

  • Jednoduché aplikácie s malým nastavením
  • Vývoj spolu s webovými štandardmi

Aurelia je klientský rámec JavaScriptu pre web, mobil a počítače. Je napísaný s ECMAScript novej generácie, integruje sa s webovými komponentmi a nemá žiadne externé závislosti.



Čítajte ďalej dva minipríručky, ktoré vám ukážu, ako zmeniť spôsob, akým vlastnosti zobrazujú hodnotu a funkciu, a ako používať Aureliu na kontrolu hodnôt vo formulároch.

01. Použite prevodníky hodnôt

Pri vývoji komponentov sa niekedy ukladané hodnoty nehodia na to, aby sa zobrazili v zobrazení. Napríklad objekt Date má po prevedení na reťazec neužitočnú hodnotu, čo vyžaduje, aby vývojári vytvorili špeciálne metódy prevodu, aby sa hodnoty zobrazili správne.

Na prekonanie tohto problému poskytuje Aurelia mechanizmus na použitie tried na zmenu hodnôt, ktoré sa nazývajú prevodníky hodnôt. Môžu mať akýkoľvek druh hodnoty, uplatniť na ňu určitý druh spracovania a na výstup namiesto pôvodnej zmeniť hodnotu.

Fungujú podobne ako rúry v Angular alebo filtre v jazykoch šablón ako Twig.

Väčšina bude jednosmerná - od modelu po pohľad. Môžu však fungovať aj inak. Platí rovnaká logika, ale s použitím fromView namiesto zobraziť , hodnoty je možné upraviť skôr, ako sa vrátia späť do modelu.

Dobrým prípadom použitia by bolo naformátovanie vstupu používateľa priamo z väzby na prvku. V tomto príklade bude písať veľké každé slovo, ktoré zadáte, čo môže byť užitočné pre pomenovacie pole.

  • Môžu byť tiež navzájom spojené, čo podporuje vytváranie skladateľných prevodníkov, ktoré môžu mať v celej aplikácii rôzne využitie. Jeden prevodník mohol filtrovať pole hodnôt, ktoré potom prešli do druhého, ktorý ich zoradil.

  • Prevodníkom môžu byť poskytnuté aj jednoduché argumenty, ktoré môžu zmeniť spôsob ich správania. Namiesto vytvárania rôznych prevádzačov na vykonávanie podobného filtrovania vytvorte taký, ktorý berie ako argument typ filtra, ktorý sa má vykonať. Aj keď je povolený iba jeden argument, môžu byť vzájomne spojené, aby sa dosiahol rovnaký efekt.

    02. Vyskúšajte overenie formulára na úrovni rámca

    Validácia je dôležitou súčasťou každej aplikácie. Používatelia musia do formulárov vkladať správne informácie, aby všetko fungovalo správne. Ak tak neurobia, mali by byť na túto skutočnosť upozornení čo najskôr.

    Aj keď validácia môže byť často zložitý proces, Aurelia má podporu pre overovanie vlastností zabudovanú priamo do rámca. Pokiaľ sú hodnoty formulára viazané na vlastnosti triedy, môže Aurelia skontrolovať, či sú správne, kedykoľvek to dáva aplikácii zmysel.

    import { inject } from 'aurelia-framework'; import { ValidationControllerFactory, ValidationRules } from 'aurelia-validation'; @inject(ValidationControllerFactory) export class ValidationForm { constructor(controllerFactory) { this.controller = controllerFactory.createForCurrentScope(); } }

    Aurelia poskytuje a ValidationController , ktorý preberá pokyny od triedy, prehliada súvisiace vlastnosti a dodáva šablónu všetky kontroly, ktoré zlyhali.

    ValidationRules .ensure('firstName') .required() .withMessage('first name required') .on(ValidationForm);

    Každý radič vyžaduje jednu triedu ValidationRules, ktorá definuje, čo sa má skontrolovať. Všetky sú navzájom prepojené, čo umožňuje riadiacemu zariadeniu logicky prechádzať kontrolami v závislosti od odovzdaných možností.

    Každý sada pravidiel začína hovorom na zaistiť() , ktorý prevezme názov kontrolovanej vlastnosti. Všetky nasledujúce príkazy sa použijú na túto vlastnosť.

    Ďalej sú to pravidlá. Existuje veľa vstavaných možností ako požadovaný() alebo email () ktoré pokrývajú bežné scenáre. Môže použiť čokoľvek iné spĺňa () , ktorá prevezme funkciu, ktorá vráti buď boolovskú hodnotu, alebo prísľub, ktorý kontrole vyhovie alebo zlyhá.

    Po pravidlách prídu akékoľvek úpravy tejto kontroly, napríklad chybové hlásenie, ktoré sa má zobraziť. Pravidlá poskytujú predvolené správy, ale tieto je možné v prípade potreby prepísať.

    Nakoniec volanie na () použije sadu pravidiel na zadanú triedu. Ak sa definuje zvnútra konštruktora triedy, dá sa zavolať pomocou toto namiesto toho.

    this.controller.validateTrigger = validateTrigger.manual;

    V predvolenom nastavení sa overenie spustí vždy, keď je rozmazaný vstupný prvok viazanej vlastnosti. Môže sa to zmeniť tak, že sa to stane pri zmene vlastnosti, alebo sa to dá spustiť manuálne.

    Ďalšia stránka: To najlepšie zo zvyšných rámcov JavaScriptu

    • 1
    • dva
    • 3
    • 4
    • 5
    • 6

    Aktuálna stránka: Aurelia

    Predchádzajúca stránka Polymér Ďalšia strana Ďalšie možnosti vyskúšať