Het schrijven van complexe applicaties is gekoppeld aan de toename van de complexiteit van de code, hoewel dit meestal geen axioma of een gevestigde regel is, zou het in feite het beste zijn als onze applicatie complex was vanwege de vereniging van veel kleine applicaties, omdat één simpele kleine app het leven van de ontwikkelaar minder ingewikkeld zou maken.
In het geval van Knockout.js iets soortgelijks gebeurt met bindingen, waar er gedrag is dat we kunnen bereiken met behulp van de bindingen Dit zou uiteindelijk echter een hoge complexiteit opleveren, aangezien dit ons een beetje flexibiliteit vermindert, hiermee zeggen we niet dat de bindingen basisprincipes zijn slecht, er zijn gewoon momenten waarop ze niet goed zouden werken voor ons.
Geavanceerde bindingenDaarom moeten we de geavanceerde bindingen, hier kunnen we onze eigen bouwen bindingen met gedrag dat we direct definiëren, waardoor we een zekere mate van complexiteit in de code besparen en leesbaarheid krijgen, het enige nadeel van het zo te noemen, is dat we dit gedrag bijna helemaal opnieuw zouden bouwen, waardoor hergebruik van code nul zou worden.
Maak binding van twee of meer ViewModels
Er zijn tijden dat onze BekijkModellen moeten zo eenvoudig mogelijk blijven, of misschien moeten we een BekijkModel die op elke pagina van onze applicatie wordt gedeeld, in ieder geval de eis om er meerdere te kunnen gebruiken BekijkModellen tegelijkertijd blijft het.
Hoe werkt het?Voordat je je zorgen maakt over dit probleem, is het goed om te weten dat het niet gek en niet onmogelijk is om te doen, in feite is het een veel voorkomende praktijk om de eenvoud en leesbaarheid van onze code in de applicatie te behouden. Om dit te laten gebeuren, hoeven we alleen een tweede parameter aan de methode door te geven ko.applyBindings dat ons zal helpen dit doel te bereiken door de verbindend naar de HTML die het bevat, op deze manier kunnen we alle BekijkModel die we nodig hebben zonder enig ongemak
Laten we een klein voorbeeld bekijken waar we dit mogelijk zullen maken, allereerst gaan we een bouwen HTML waar we twee elementen zullen hebben elk met een naam van BekijkModel anders, dit geeft ons de basis voor wat we willen bereiken en binnen elke input plaatsen we eenvoudig een data-bind van type tekst.
Al in het deel van JavaScript we zullen onze . definiëren BekijkModel algemeen waar we een attribuut met de naam zullen retourneren Naam en op het moment dat we de instantie ervan maken, gaan we een maken bekijkModel1 en een bekijkModel2 welke voorbeelden zullen zijn van de BekijkModel algemeen die we maken met verschillende namen, tot slot door de toe te passen ko.applyBinding we zullen vertellen welk blok HTML elk moet erbij horen en zo zullen we het doel van dit voorbeeld bereiken.
Laten we dan in de volgende code kijken hoe we alles uitdrukken wat we eerder hebben uitgelegd:
Geavanceerde gegevensbindingLaten we in de volgende afbeelding zien hoe ons voorbeeld eruitziet wanneer we het in de browser uitvoeren:
VERGROTEN
We zien in de afbeelding dat onze twee BekijkModellen effectief worden ze toegepast in onze HTML, elk in het element dat we doorgeven als de tweede parameter aan de methode ko.applyBindingen () waardoor we het idee krijgen hoe we het vollediger kunnen toepassen in onze applicaties.
Bindingen en TinyMCE
Voor dit voorbeeld gaan we een functionaliteit bouwen die is aangepast aan de echte wereld, we gaan een verbindend geavanceerd om ons te helpen de editor te integreren TinyMCE in onze HTML, wat deze editor doet is een interface bouwen WYSIWYG, dat wil zeggen, een rich-text-editor. De grootste moeilijkheid van deze implementatie is dat we onze eigen moeten creëren verbindend, die ons hoofdpijn kan bezorgen als we geen adequate gids hebben, die we nu zullen hebben.
VereistenOm dit voorbeeld uit te voeren, moeten we een paar externe bronnen downloaden, in dit geval jQuery in de nieuwste versie, naast het downloaden van de TinyMCE en neem het op in ons project, om de middelen te krijgen die we hebben, hoeven we alleen maar snel te zoeken in Google dus we zullen niet lang bij dit punt stilstaan. Het andere dat we nodig hebben, is een nieuw bestand maken met de naam kobinding.js dat is waar we de benodigde code zullen schrijven zodat onze oplossing goed kan werken. Zodra we al onze bronnen hebben gedownload en in een pad staan waartoe we toegang hebben vanuit onze applicatie, kunnen we onze code schrijven.
Wat de applicatie zal doen, is ons een geven voorbeeld van wat we schrijven, hiervoor zullen we een formulier maken waarin we ons tekstvak zullen plaatsen met at TinyMCE, een reset-knop om alles terug te brengen naar de oorspronkelijke staat en tot slot een waar we de tekst zullen ontvangen die we schrijven.
Ten slotte zullen we al onze bronnen opnemen, inclusief het nieuwe bestand kobinding.js en we bouwen de nodige code voor onze BekijkModel met een waarneembaar waarmee we de wijzigingen in ons tekstvak kunnen detecteren, laten we eens kijken hoe onze code eruit ziet:
Geavanceerde gegevensbinding TinyMCE Inhoud resettenAls we naar de code kijken en de vorige tutorials hebben gevolgd, zullen we merken dat er niets is dat ons kan doen twijfelen, maar als we dit in onze browser uitvoeren, werkt het niet op de manier die we hebben uitgelegd en dat komt omdat we heb nodig verbindend aangepast in ons nieuwe bestand.Voorbeeld
Wat deze nieuwe code doet, is een verband leggen tussen het gedrag van de TinyMCE en de onze BekijkModel, hiervoor gaan we twee functies of methoden maken genaamd in het Y bijwerken, voor de methode in het zoals de naam al doet vermoeden, is wanneer we onze component initialiseren, hier stellen we de verbindend van het tekstgebied met TinyMCE zodat we het waarneembare kunnen toepassen, daarnaast zullen we de gebeurtenis definiëren verandering dat is wanneer de staat en inhoud van ons tekstvak verandert, zodat we de inhoud in realtime kunnen bijwerken.
De andere methode of functie is: bijwerken, deze wordt elke keer geactiveerd als er wijzigingen zijn in het gekoppelde element, zoals de knop om de inhoud te herstellen, wat het doet is dat het direct is gekoppeld aan wat het waarneembare dat we eerder hadden gemaakt ons biedt. Laten we eens kijken naar de definitieve code voor onze kobinding.js:
ko.bindingHandlers.tinymce = {init: function (element, valueAccessor, allBindingsAccessor) {var tinymceOptions = {setup: function (editor) {editor.on ('change', function (event) {valueAccessor () (event.target. Inhoud krijgen ());}); }}; $ (element) .text (valueAccessor () ()); setTimeout (functie () {$ (element) .tinymce (tinymceOptions);}, 0); ko.utils ['domNodeDisposal']. addDisposeCallback (element, function () {$ (element) .tinymce (). remove ();}); }, 'update': function (element, valueAccessor, allBindings) {var tinymce = $ (element) .tinymce (), value = valueAccessor () (); if (tinymce) {if (tinymce.getContent ()! == waarde) {tinymce.setContent (waarde); }}}};Als we opnieuw in onze browser werken, zullen we zien dat alles werkt zoals het hoort, op het moment van schrijven en als we de focus veranderen, zullen we zien dat we in ons voorbeeldgebied de inhoud hebben zoals het eruit zou moeten zien:
VERGROTEN
Hiermee konden we een geavanceerde binding en gepersonaliseerd die ons helpt alles te begrijpen wat we kunnen bereiken met een beetje vindingrijkheid en alle tools die het ons geeft Knock out. Gevallen zoals die van TinyMCE Ze zijn heel gebruikelijk, omdat dit type plug-in erg populair is bij de ontwikkeling van webapplicaties, dus het kan zijn dat we op een bepaald moment in de ontwikkeling van ons project een vergelijkbare oplossing moeten toepassen.
Hiermee hebben we deze tutorial afgerond, omdat we zien dat het niet nodig is om ons te beperken tot de functies en vooraf vastgestelde methoden in Knock outNatuurlijk zijn er functionaliteiten die voor dit kennisniveau nog zeer geavanceerd zijn, maar die met praktijk en onderzoek kunnen worden bereikt. Het interessante is dat dit allemaal kan worden bereikt met een beetje lezing van de officiële documentatie van Knock out en ook op zoek naar voorbeeldcases die ons helpen om onszelf te illustreren en in context te plaatsen.
