Porozumění vazbě dat v Knockout.js

Vazba dat není to nic jiného než spojení dynamických dat, buď textu nebo HTML v různých částech stromu SLUNCE našeho dokumentu, kde funguje Knockout.js, nám to umožňuje generovat dynamický obsah z pohledů a modelů.
Tento koncept lze nalézt ve velkém počtu vývojových rámců pro JavaScript protože je to velmi účinný způsob, jak vyjádřit vývojovou logiku, je proto životně důležité, abychom pochopili, jak funguje a jak nám může usnadnit život při vytváření našich aplikací.
PožadavkyHlavním požadavkem je umět spustit Knockout.js ať už jsme jej stáhli nebo zahrnuli ze souboru CDN. Budeme také potřebovat server stylu Apache aby sloužily naší stránce a podobně jako textový editor Vznešený text nebo NotePad ++ k vytvoření dokumentů, které naše aplikace unesou.
Nejlepší způsob, jak vidět Vazba dat je s příkladem, podívejme se v následujícím kódu, jak jsme vytvořili dokument HTML kam zahrnujeme Knockout.js, pak jsme v našem těle vytvořili štítek H1 v něm děláme a datová vazba z HTML, to znamená, že čeká na HTML kód.
V části JavaScript jednoduše jsme vytvořili a pohledový model a v něm definovat některé atributy, aby s ním bylo možné pracovat. Zajímavostí je, že nám to umožňuje předávat data z našich pohledový model do části HTML. Podívejme se, jak náš kód vypadá:

 Vazba dat v knockout.js 

Při volání našeho dokumentu z našeho prohlížeče získáme následující výsledek:

Zde vidíme, jak jsme vytvořili metodu, která vrací název a trochu HTML abychom tomu dali styl, znamená to, že můžeme mít nekonečnou škálu možností, ale asi nejvíce vyčnívá, že můžeme použít datová vazba téměř na jakoukoli položku. Můžeme tedy posílat text, HTML atd.
Ale nejen to, co nám umožňuje tisknout text uživateli, můžeme také začlenit CSS, třídy a atributy do našich štítků HTML, což nám umožňuje ovládat téměř každý aspekt naší stránky bez nutnosti nastavovat statické hodnoty.
Podívejme se v následujícím příkladu, jak dáváme štítku speciální třídu HTML„Myšlenka je taková, že můžeme vytvářet dynamické styly, aniž bychom museli zasahovat, když máme aplikaci, která hledá písmo ZBYTEK, avšak v tomto případě pro zjednodušení budeme dynamicky načítat pouze jednu komponentu:

 Vazba dat v knockout.js 
 

Poté si všimneme, jak můžeme komponentu předat styl který bude definovat vzhled textu, mohli bychom také přidat třídu a nakonec zavoláme náš text z modelu, také si všimneme, že to všechno děláme stejně datová vazba, oddělující jednotlivé prvky čárkami.
Pokud spustíme náš nový příklad, výsledek v našem prohlížeči je následující:

ZVĚTŠIT

Věnujme zvláštní pozornost části debugger z HTML prohlížeče, zde vidíme, kde jsou prvky souboru datová vazba byly účinně přeneseny na etiketu.
Existují další funkce, které můžeme s datová vazba, jeden z nich jsou podmíněné, to znamená, že můžeme do svých popisků umístit jeden nebo druhý prvek HTML s přihlédnutím k různým vlastnostem našeho modelu. Podívejme se na následující kód, kde použijeme příklad tohoto stylu:

 Podmíněné vázání dat 
 

V našem modelovém zobrazení jsme definovali atribut nazvaný id, který jsme nastavili na 0, pak v našem HTML v sekci datová vazba Definovali jsme ternární operátor, kde určíme, zda je ID zobrazení modelu 0, vytiskne „Hello“, jinak vytiskne „Goodbye“.
Spustíme příklad v prohlížeči, abychom viděli jeho výsledek:

Zajímavým cvičením by bylo, kdybyste mohli změnit id na jinou hodnotu k potvrzení operace, proto to necháváme jako úkol.
Něco velmi důležitého, co musíme vzít v úvahu, je kontext našich prvků, je to proto Knockout.js používá hierarchickou strukturu Otec syn zvládnout různé vlastnosti, které získáme z pohledů modelu.
To znamená, že vždy pracujeme na základě rodiče, a tak můžeme přistupovat k jeho vlastnostem, čímž generujeme vlastnosti dítěte, které se liší od ostatních dětí, které jsou na stejné úrovni, a tak můžeme začlenit různé hodnoty.
Protože vše souvisí s kontextem, vidíme, že bychom v předchozích příkladech mohli použít text vázaný na data aniž by bylo nutné uvádět, komu patří, protože když k tomu dojde, Knockout.js okamžitě přebírá kontext aktuálního dítěte. Podívejme se níže na různé typy kontextu, které můžeme v naší aplikaci zvládnout:
$ rootJe to hlavní kontext, odkud pochází náš modelový pohled, při vyvolání z jakékoli části naší aplikace bude vždy hledat nejhierarchičtější vztah s nejvyšší prioritou v naší struktuře, je zvláštní, když máme mnoho dětí a chceme něco od staršího rodiče.
$ rodičFunguje to podobně jako $ roots tím rozdílem, že se týká pouze bezprostředního rodiče našeho prvku, takže jeho rozsah je omezen na to, je široce používán, když pracujeme s cykly pro každého generovat mnoho dětí.
$ rodičePřidání množného čísla do tohoto kontextu nám říká, že vytváříme druh uspořádání nebo pole, které obsahuje rejstřík pro každého z rodičů dítěte, odkud jej nazýváme, například takto $ rodiče [0] je bezprostředním otcem, $ rodiče [1] je rodič přímého rodiče a tak dále.
$ dataUmožňuje nám přístup k datům kontextu, kde jsme umístěni, obecně se používá, když pracujeme s obsahem, který jsou proměnnými, a potřebujeme přístup k našim vlastnostem zobrazení modelu.
$ indexJe přístupný pouze tehdy, když pracujeme se smyčkami pro každého a umožňuje nám přístup k různým pozicím našeho živlu.
Když potřebujeme iterovat přes několik prvků, je to okamžik, kdy musíme použít smyčku pro každého, toto projde polem nebo seznamem prvků a tímto způsobem můžeme sestavit náš seznam v dokumentu HTML.
V následujícím příkladu budeme mít vlastnost nazvanou knihy v našem modelovém zobrazení a poté ji budeme procházet pomocí pro každého použití jedné z kontextových proměnných, v tomto případě $ data, uvidíme:

 Vazba dat foreach

Pokud uvidíme výsledek prohlížeče, všimneme si operace, ke které dochází, když vezmeme v úvahu všechny koncepty, které jsme se během kurzu naučili.

Tímto jsme tento tutoriál dokončili, naučili jsme se a měli jsme s ním hlubší kontakt Knockout.js„Je důležité velmi hluboko a solidně porozumět pojmům toho, co je datová vazba, je již způsob, jakým budeme používat data, atributy a vlastnosti našich modelových pohledů. Byli jsme také schopni pochopit velmi důležitý koncept, jako je kontext, nyní můžeme pochopit, jak se různé prvky liší a proč Knockout.js ví, kdy získat některá data nad ostatními, a je to proto, že vždy zná kontext našich prvků.