Obsah
Přenos nejtěžší části aplikace na klientskou stranu je stále běžnější, a proto jsou serverové jazyky odsunuty pouze na ty, které zvládají trvalost prostřednictvím služeb. ZBYTEK.Část odpovědnosti za to, že se to všechno stane, připadá na nové způsoby práce JavaScript a generování dynamických a responzivních uživatelských rozhraní, díky různým rámců existující.
Tento rámec má mnoho silných stránek, jako je jeho nízká hmotnost a dokumentace, stejně jako to, že je na trhu již dlouhou dobu, takže důsledně zraje, aby bylo možné jej použít ve výrobním prostředí.
1- Jako většina knihoven a rámců JavaScript požadavky nejsou tak náročné, v tomto případě budeme potřebovat malý webový server pro lepší zpracování našich požadavků, to může být Wamp v Okna nebo instance Apache v Linux nebo Mac.
2- Potřebujeme bohatý textový editor ve stylu Vznešený text nebo NotePad ++ umět napsat potřebný kód pro splnění příkladů a cvičení, které budeme předvádět.
3- Konečně potřebujeme přístup k internetu, abychom mohli stahovat Knockout.js ani jednou.
Proces instalace je celkem jednoduchý a nezávisí na konkrétní platformě, proces bude stejný, ať už jsme v Windows, Linux nebo MAC.
První věc, kterou musíme udělat, je stáhnout Knockout.js z jeho oficiální stránky můžeme přejít na web projektu a v sekci stahování klikneme pravým tlačítkem a vybereme možnost Uložit odkaz jako:
ZVĚTŠIT
Jakmile máme soubor, musíme jej jednoduše zahrnout do souboru HTML jak následuje:
Instalace Knockout.jsJak vidíme, stažený soubor jsme museli zahrnout pouze pomocí značky skriptu. V případě, že chceme pracovat s verzí CDN Musíme pouze změnit lokální cestu na internetovou cestu souboru, to je velmi podobné práci s knihovnami jako např jQuery nebo rámce jako AngularJS.
Zobrazit model Zobrazit modelNázev této sekce se může zdát jako omyl. Jak je možné hovořit o Model View View Model? Není to stejné? Ukázalo se, že Knokaut má návrhový vzor nebo vývojové paradigma, odkud se inspiruje MVC, kde určitě Modelka a Pohled chovají se jako to, co známe z „klasického“ přístupu, nicméně máme novou vrstvu nazvanou ViewModel která má na starosti sjednocování a poskytování funkčnosti našim názorům.
Vazba dat je hlavní charakteristikou našeho rámce, který nám umožňuje uvést v dokumentu HTML ke kterým prvkům musíte poskytnout přístup Knockout.js, ačkoli to zní jako něco složitého, můžeme to shrnout jako něco jednoduššího, je to jednoduchá aplikace vlastností na prvky stromu SLUNCE kde chceme, aby měl výkon Knockout.js.
Podívejme se na následující ukázkový kód, řekněme, že chceme vytisknout jméno z našeho ViewModel na štítku uvnitř těloK tomu musíme provést pouze následující:
Instalace Knockout.jsVidíme to na našem štítku h1 existuje značka span a značka span má vlastnost, která není nativní HTML jaký je majetek datová vazba, to je to, co nás spojuje Knockout.js s naší Strom DOM v tomto případě jsme jednoduše uvedli, že název vlastnosti nebo proměnné by měl být převzat z našeho ViewModel.
Pokud spustíme náš příklad v prohlížeči, získáme výsledek, jako je ten, který můžeme vidět na následujícím obrázku:
Teď už jsme si tu filozofii museli uvědomit ViewModel je důležitou součástí práce v Knockout.js, proto se budeme v tomto tématu dále zabývat trochu více.
Vytvoření VistaModelExistují dva způsoby, jak vytvořit zobrazení modelu, základní formulář a objektově orientovaný. Ten, který použijeme, již závisí na našem způsobu vývoje, ačkoli doporučený je objektově orientovaný protože i když je na začátku složitější, umožňuje nám dosáhnout lepšího řádu v naší aplikaci.
Chcete -li vytvořit a ViewModel základní, musíme udělat něco jako následující:
var myModelView = {jméno: 'Pedro Perez'};Jak to vidíme, není to vůbec složité, jednoduše definujeme proměnnou a umístíme na ni obsah stylu. JSON.Nyní cesta objektově orientovaný nám umožňuje vytvářet metody přístupu a manipulace s vlastnostmi, které do nich chceme umístit ViewModelZa tímto účelem můžeme udělat něco jako následující:
var myOOOOOOFModelView = funkce () {var self = this; self.name = 'Jonathan'; self.lastname = 'Acosta'; self.getName = funkce () {return self.name + '' + self.last name; };};Pokud v tomto případě chceme, můžeme přímo přistupovat ke jménu nebo příjmení jednotlivě, nebo použít metodu getName () to nám dává jméno a příjmení spojené nebo zřetězené.Tady si mnozí mohou klást otázku, jestli nebylo snazší udělat sólo Tětiva Pokud jde o jméno a příjmení, odpověď je velmi jednoduchá, čím více možností máme, tím jednodušší bude aplikace z našeho pohledu, představte si, že jsme chtěli pouze jméno, přičemž v základním tvaru bychom museli zpracovat řetězec tak, aby byl schopni je oddělit, v objektově orientované změně přistupujeme pouze k majetku, který nás zajímá.
To, co jsme zatím viděli, je velmi statické, co když teď začneme používat parametry, tímto způsobem a ViewModel Může to sloužit mnoha účelům, protože se nebudeme omezovat na to, co stanovíme, ale můžeme data změnit podle situace.
Přepišme svůj tvar objektově orientovaný, a použijeme následující formulář:
var myOOOOOOOFModelView = funkce (jméno, příjmení) {var self = this; self.name = jméno; self.lastname = příjmení; self.getName = funkce () {return self.name + '' + self.last name; };};Jak jsme viděli, bylo velmi snadné implementovat použití parametrů, nyní to implementujeme v našem prvním příkladu, a tak uvidíme, jak vše zapadne na své místo, k tomu použijeme následující kód HTML:
Instalace Knockout.jsZde si jako první všimneme, že datová vazba už není text jako v původním příkladu, pokud ne použijeme html, to nám umožňuje zasílat štítky html a tak být schopen dát více stylu naší odpovědi z ViewModel.
Již v sekci, kde definujeme naše ViewModel vidíme to před aplikací vazba z Knockout.js, vyrábíme instanci našeho ViewModel objektově orientovanýV tomto bodě můžeme dát hodnoty našim parametrům nebo vlastnostem, jak vidíme, zachovali jsme oddělení jména a příjmení, ale nakonec můžeme použít metodu, která je spojuje.
Když spustíme náš příklad, poskytne nám v prohlížeči následující výsledky:
Tím náš tutoriál dokončujeme, úspěšně jsme provedli naše první kroky Knockout.jsS tím můžeme začít přemýšlet o všech možnostech, které nám tento rámec pro vývoj aplikací nabízí s logikou na straně klienta.
