Pokročilé vazby v Knockout.js

Psaní komplexních aplikací je spojeno se zvýšením složitosti kódu, ačkoli se to obvykle stává, není to axiom ani zavedené pravidlo, ve skutečnosti by bylo nejlepší, kdyby naše aplikace byla složitá kvůli spojení mnoha malých aplikací, protože jedna jednoduchá malá aplikace by život vývojáře méně komplikovala.

V případě Knockout.js něco podobného se stane s vázání, kde existují chování, kterých můžeme dosáhnout pomocí vázání To by však nakonec vedlo k vysoké složitosti, protože to nám trochu snižuje flexibilitu, a proto neříkáme, že vázání základy jsou špatné, prostě jsou chvíle, kdy by pro nás nefungovaly správně.

Pokročilé vazbyProto musíme použít pokročilé vazby, zde si můžeme postavit vlastní vázání s chováním, které definujeme přímo, což nám ušetří určitý stupeň složitosti v kódu a získá čitelnost, jedinou nevýhodou jeho volání je, že bychom toto chování vytvořili téměř od nuly, takže kód bude znovu použit null.

Vytvořte vazbu dvou nebo více modelů ViewModels
Jsou chvíle, kdy naše ViewModels by mělo zůstat co nejjednodušší, nebo možná musíme použít a ViewModel který je sdílen na každé stránce naší aplikace, v každém případě požadavek možnosti použít několik ViewModels zároveň zůstává.

Jak to funguje?Než si s tímto problémem uděláte starosti, je dobré vědět, že to není nic šíleného a nemožné, ve skutečnosti je velmi běžnou praxí zachovat v aplikaci jednoduchost a čitelnost našeho kódu. Aby se to stalo, musíme metodě předat pouze druhý parametr ko.applyBindings to nám pomůže dosáhnout tohoto cíle omezením vazba do HTML který to obsahuje, tímto způsobem můžeme použít všechny ViewModel které potřebujeme bez jakýchkoli nepříjemností

Podívejme se na malý příklad, kde to umožníme, v první řadě budeme stavět a HTML kde budeme mít dva prvky každý s názvem ViewModel různé, to nám poskytne základ pro to, čeho chceme dosáhnout, a v rámci každého vstupu jednoduše umístíme a datová vazba typového textu.

Již v části JavaScript definujeme naše ViewModel obecné, kde vrátíme atribut s názvem název a v době, kdy se staneme jejich příkladem, vytvoříme a pohledModel1 a a viewModel2 což budou instance ViewModel obecné, které vytváříme pomocí různých jmen, nakonec aplikací ko.applyBinding řekneme, který blok HTML každý musí patřit, a tím dosáhneme cíle tohoto příkladu.

Podívejme se tedy v následujícím kódu, jak vyjádříme vše, co jsme vysvětlili dříve:

 Pokročilá vazba dat

Podívejme se na následujícím obrázku, jak vypadá náš příklad, když jej spustíme v prohlížeči:

ZVĚTŠIT

Na obrázku vidíme, že naši dva ViewModels ve skutečnosti jsou aplikovány v našem HTML, každý je obsažen v prvku, který předáme jako druhý parametr metodě ko.applyBindings () což nám dává představu o tom, jak ji můžeme v našich aplikacích aplikovat úplněji.

Vazby a TinyMCE
V tomto případě budeme stavět funkce přizpůsobené skutečnému světu, budeme stavět a vazba pokročilý, aby nám pomohl začlenit editor TinyMCE v našem HTML„Tento editor dělá vytvoření rozhraní WYSIWYG, tj. editor bohatého textu. Hlavní obtíž této implementace je, že si musíme vytvořit vlastní vazba, což nám může způsobit bolest hlavy, pokud nemáme adekvátního průvodce, kterého budeme mít nyní.

PožadavkyAbychom mohli tento příklad provést, musíme si v tomto případě stáhnout několik externích zdrojů jQuery ve své nejnovější verzi, kromě stahování TinyMCE a zahrnout jej do našeho projektu, abychom získali zdroje, ve kterých jednoduše musíme provést rychlé vyhledávání Google takže se v tomto bodě nebudeme dlouho zdržovat. Další věc, kterou budeme potřebovat, je vytvořit nový soubor s názvem kobinding.js kde napíšeme potřebný kód, aby naše řešení fungovalo správně. Jakmile máme stažené všechny naše zdroje a na cestě, ke které máme přístup z naší aplikace, můžeme napsat náš kód.

Co aplikace udělá, je poskytnout nám náhled toho, co napíšeme, za tímto účelem vytvoříme formulář, kam umístíme naše textové pole, které bude mít TinyMCE, resetovací tlačítko pro vrácení všeho do původního stavu a nakonec a kde obdržíme text, který píšeme.

Nakonec zahrneme všechny naše zdroje včetně nového souboru kobinding.js a vytvoříme potřebný kód pro naše ViewModel s pozorovatelný to nám umožňuje detekovat změny v našem textovém poli, podívejme se, jak vypadá náš kód:

 Pokročilá vazba dat Obnovení obsahu TinyMCE
Náhled

Pokud se podíváme na kód a dodrželi jsme předchozí návody, všimneme si, že neexistuje nic, co by nám mohlo způsobit pochybnosti, nicméně pokud to spustíme v našem prohlížeči, nebude to fungovat způsobem, který jsme vysvětlili, a to proto, že potřebovat a vazba vlastní v našem novém souboru.

Tento nový kód dělá propojení mezi chováním souboru TinyMCE a naši ViewModelZa tímto účelem vytvoříme dvě funkce nebo metody s názvem inic Y Aktualizace, pro metodu inic jak naznačuje jeho název, když inicializujeme naši komponentu, zde nastavíme vazba textarea s TinyMCE abychom mohli aplikovat pozorovatelné, navíc definujeme událost změna kdy se změní stav a obsah našeho textového pole, abychom mohli aktualizovat obsah v reálném čase.

Druhá metoda nebo funkce je Aktualizace, toto se aktivuje pokaždé, když dojde ke změnám v propojeném prvku, jako je například tlačítko pro obnovení obsahu, což znamená, že je přímo spojeno s tím, co nám poskytuje pozorovatelné, které jsme dříve vytvořili. Podívejme se tedy na konečný kód pro náš kobinding.js:

 ko.bindingHandlers.tinymce = {init: function (element, valueAccessor, allBindingsAccessor) {var tinymceOptions = {setup: function (editor) {editor.on ('change', function (event) {valueAccessor () (event.target. getContent ());}); }}; $ (element) .text (valueAccessor () ()); setTimeout (funkce () {$ (element) .tinymce (tinymceOptions);}, 0); ko.utils ['domNodeDisposition']. addDisposeCallback (element, function () {$ (element) .tinymce (). remove ();}); }, 'update': function (element, valueAccessor, allBindings) {var tinymce = $ (element) .tinymce (), value = valueAccessor () (); if (tinymce) {if (tinymce.getContent ()! == hodnota) {tinymce.setContent (hodnota); }}}};

Pokud znovu spustíme v prohlížeči, uvidíme, že vše funguje, jak má, v době psaní a pokud změníme zaměření, uvidíme, že v naší oblasti náhledu máme obsah, jak by měl vypadat:

ZVĚTŠIT

Díky tomu jsme mohli vytvořit soubor pokročilé vázání a přizpůsobené, což nám pomáhá porozumět všemu, čeho můžeme dosáhnout s trochou vynalézavosti a se všemi nástroji, které nám to dává Knokaut. Podobné případy TinyMCE Jsou velmi běžné, protože tento typ zásuvných modulů je velmi populární při vývoji webových aplikací, takže možná budeme muset v určitém okamžiku vývoje našeho projektu použít podobné řešení.

Tímto jsme tento tutoriál dokončili, protože vidíme, že není nutné omezovat se na funkce a předem zavedené metody v KnokautSamozřejmě existují funkce, které jsou pro tuto úroveň znalostí stále velmi pokročilé, ale které lze dosáhnout praxí a výzkumem. Zajímavostí je, že toho všeho lze dosáhnout malým čtením oficiální dokumentace Knokaut a také hledat příklady, které nám pomáhají ilustrovat a zasadit se do kontextu.