Práce s formuláři v Knockout.js

Formuláře jsou nedílnou součástí jakékoli aplikace nebo webové stránky, protože jsou jedním z prostředků, které nám umožňují získávat data uživatelů nativně, a proto je jejich zpracování velmi běžným úkolem.
Knockout.js nám umožňuje pracovat s vaším objektem datová vazba všechny prvky, které mohou tvořit formulář, což dává možnost moci ověřit, spustit události, přiřadit pozorovatelné atd. Díky tomu je zpracování formulářů na straně klienta funkční, a proto přidáme další vrstvu ověření, než se dostane na stranu serveru.
PožadavkyBudeme jen muset mít Knockout.js v našem systému a přístupné aplikacím, které se chystáme vytvořit, oprávnění k zápisu souborů, připojení k internetu pro získání knihoven, pokud je nemáme, a textový editor, jako je Vznešený text nebo NotePad ++. Ke spouštění aplikací potřebujeme typ webového serveru Apache nebo Nginx v našem testovacím prostředí.
Než přejdeme k příkladům s případy, které můžeme použít, je velmi důležité znát datové vazby které mohou pracovat s prvky formy naší aplikace, tímto způsobem si můžeme začít dělat představu o tom, čeho můžeme a čeho nemůžeme dosáhnout, zejména o způsobech, jak můžeme získat výsledky, které potřebujeme, aby naše aplikace správně fungovala:
Hodnota vázaná na dataTo se používá v hodnotách nebo výběrových vstupních prvcích, mohou to být vstupní, textové nebo výběrové prvky, čímž můžeme zachytit hodnotu prvku v době, kdy ho potřebujeme použít.
Data-bind textInputVýchodní vazba se používá s prvky vstupu a textarea, jeho funkce je podobná hodnota Pokud k němu ale přiřadíme pozorovatelné, můžeme hodnoty zachytit tak, jak uživatel s elementem interaguje, na rozdíl od hodnoty, která nám dává hodnotu, když se prvek změní, například když ztratí fokus.
Vázání dat zkontrolovánoPoužívá se s prvky typu zaškrtávací políčko Y přepínačeJak naznačuje jeho název, umožňuje nám zjistit nebo zjistit, zda je prvek vybrán ve struktuře, která používá uvedené prvky.
Možnosti vazby datPomocí tohoto vazba Vybraný prvek můžeme vyplnit možnostmi, které zobrazí ve formuláři, je perfektní, když chceme dynamicky vytvořit katalog možností.
Data-bind selectedOptionsTaké exkluzivní pro prvek select se používá, když potřebujeme nastavit vybrané možnosti při nastavování vlastnosti multi, protože musíme vybrat více než jednu možnost najednouz.
Povolit / zakázat vázání datUmožňuje nám povolit nebo zakázat jakýkoli z různých prvků formuláře, čímž můžeme prvek odebrat, pokud není nutné jej použít v toku aplikace za jakékoli konkrétní podmínky, kde umožnit slouží k povolení a deaktivovat deaktivovat v případě, že neznáme význam každého slova.
Nejzajímavější z nich datové vazby je, že fungují dvěma způsoby, to znamená, že když dojde ke změně prvku, můžeme jej přijmout v našem modelovém zobrazení a v případě potřeby provést nějaké zpracování, ale také pokud máme pozorovatelné a chceme z aplikace něco udělat do formy můžeme také bez jakéhokoli problému, pokud používáme datová vazba vhodné pro typ prvku formuláře, protože Knockout.js nebude interpretovat chybné pokyny tak, jak by to mohl udělat prohlížeč s kódem HTML.
Podívejme se nyní na praktický příklad toho, jak můžeme použít všechny koncepty, o kterých jsme mluvili v předchozí části tohoto tutoriálu, vytvoříme prvek typu textarea že toto omezení akceptuje pouze 140 znaků, musíme uživatele informovat, kolik znaků mu při psaní zbývá.
Logika, kterou použijeme, je velmi jednoduchá, zahrneme data-bind textInput v elementu textarea našeho formuláře, pak jej v našem modelovém pohledu nastavíme jako pozorovatelný, a tak můžeme začít zachycovat znaky při psaní uživatelem. Nakonec použijeme prvek vypočítané Abychom vytvořili složený pozorovatelný součet zbývajících znaků, v tuto chvíli nebudeme nutit uživatele psát méně, informujeme ho pouze o postavách. Podívejme se na kód pro náš příklad:

 Formuláře v knockout.js
Zadejte text

Zbývající postavy: 

Je třeba poznamenat, že nepoužíváme hodnota datové vazby protože potřebujeme, aby ke změně počtu zbývajících znaků došlo v době, kdy uživatel píše, protože pokud ne, mohli bychom pouze uvést množství v době, kdy přechází na jiný prvek, a to by nebylo optimální pro to, na co se zaměřujeme při používání Knockout.jsExistují však případy, kdy je tento typ chování nezbytný, vše závisí na tom, co naše aplikace potřebuje. Podívejme se tedy, jak vypadá náš příklad, když jej spustíme v prohlížeči:

Zde samozřejmě nemůžeme dynamicky vidět, jak náš čítač klesá, ale když napíšeme počítadlo zbývajících znaků, aktualizuje se tak, jak je zapsáno v prvku textarea formuláře:

Dalším aspektem, který při práci s formuláři v našich aplikacích často potřebujeme, jsou události, protože s nimi můžeme spouštět akce, když uživatel něco konkrétního dělá, například klikne, nebo najede myší nad konkrétní část našeho HTML. Podívejme se na některé události, které můžeme použít v našich formulářích:
Odeslat událostTuto událost lze použít pouze v prvku formulář, a aktivuje se právě tehdy, když uživatel odešle formulář na server, buď prostřednictvím odeslání vstupu, nebo jinou metodou.
Klikněte na událostTato událost je stará známá, protože její název naznačuje, že je aktivována kliknutím na prvek v naší aplikaci.
Akce HasFocusTato událost je spuštěna, když uživatel obecně zvolí prvek obecně vstup, textarea nebo výběr a je v tu chvíli aktivní.
Existuje také možnost využití dalších událostí, které jsou k dispozici v SLUNCE například přejet myší, stisknutí klávesy za účelem rozšíření funkcí našeho modelového zobrazení na tyto úrovně.
V následujícím cvičení použijeme znalosti o událostech, které jsme získali, vytvoříme malý formulář, kde budeme mít seznam, a pokaždé, když najedeme myší na některou možnost, zobrazí se obrázek zobrazeno, samozřejmě to bude demonstrační implementace a není vhodná pro produkci, ale pomáhá nám pochopit, na čem jsme pracovali.
V tomto případě budeme navíc potřebovat Knockout.js knihovna jQuery použít v naší aplikaci některé efekty, takže ideální je stáhnout si jej a uložit do stejné složky nebo adresáře, ve kterém máme Knockout.jsnebo jej můžete použít ze svého CDN oficiální. Podívejme se tedy na potřebný kód:

 Formuláře v knockout.js

Zde jsme jednoduše udělali vytvoření seznamu věcí s popisem a obrázkem, tento obrázek může být kdekoli dostupný aplikací, v tomto případě jsme vybrali jeho kořenový adresář, poté vytvoříme funkci, která přidá obrázek do volič pomocí jQuery abychom mohli ukázat totéž v SLUNCE.
V části HTML vidíme, že jsme vytvořili seznam s prvky, které do seznamu patří věci a nakonec naznačujeme, že událost je přejet myší a funkce, která se má provést, když dojde k této události. Podívejme se, jak vypadá naše aplikace, když ji spustíme v prohlížeči:

Pokud tedy přesuneme kurzor myši na některé texty, načte se odpovídající obrázek a uvidíme funkčnost našeho příkladu:

Jelikož se jedná o dynamickou změnu, nemůžeme tuto změnu ocenit, ale pokud přesuneme kurzor na horní prvek, obrázek se změní. Tímto jsme dokončili tento tutoriál, se kterým jsme se ponořili do práce s formuláři pomocí Knockout.js, což nám dává nástroje ke zlepšení zachycování a ověřování dat, která pochází od našich uživatelů.