Skrivandet av komplexa applikationer är kopplat till ökningen av kodens komplexitet, även om detta vanligtvis inte är ett axiom eller en fastställd regel, i själva verket vore det bäst om vår ansökan var komplex på grund av sammanslutningen av många små applikationer, eftersom en enkel liten app skulle göra utvecklarens liv mindre komplicerat.
I fallet med Knockout.js något liknande händer med bindningar, där det finns beteenden som vi kan uppnå med hjälp av bindningar Detta skulle emellertid generera en hög komplexitet i slutändan eftersom detta minskar oss lite flexibilitet, med detta säger vi inte att bindningar grunderna är dåliga, det finns helt enkelt tillfällen då de inte skulle fungera korrekt för oss.
Avancerade bindningarDet är därför vi måste använda avancerade bindningar, här kan vi bygga vårt eget bindningar med beteenden som vi definierar direkt, vilket sparar oss en viss komplexitet i koden och får läsbarhet, den enda nackdelen med att kalla det är att vi skulle bygga upp dessa beteenden nästan från grunden, vilket gör att kod återanvänds.
Gör bindning av två eller flera ViewModels
Det finns tillfällen när vår ViewModels ska förbli så enkelt som möjligt, eller kanske måste vi använda en ViewModel som delas på varje sida i vår applikation, i alla fall kravet på att kunna använda flera ViewModels samtidigt finns det kvar.
Hur fungerar det?Innan du oroar dig för den här frågan är det bra att veta att det inte är något galet och inte omöjligt att göra, det är faktiskt en mycket vanlig metod att behålla enkelheten och läsbarheten för vår kod i applikationen. För att få detta att hända behöver vi bara skicka en andra parameter till metoden ko.applyBindings som hjälper oss att uppnå detta mål genom att begränsa bindande till HTML som innehåller den, på så sätt kan vi tillämpa alla ViewModel som vi behöver utan besvär
Låt oss se ett litet exempel där vi kommer att göra detta möjligt, först och främst ska vi bygga en HTML där vi kommer att ha två element var och en med namnet ViewModel annorlunda, kommer detta att ge oss grunden för vad vi vill uppnå och inom varje input kommer vi helt enkelt att placera en databindning av typtext.
Redan i delen av JavaScript vi kommer att definiera vår ViewModel general där vi kommer att returnera ett attribut som heter namn och när vi gör dem till exempel kommer vi att skapa en viewModel1 och a viewModel2 som kommer att vara exempel på ViewModel generellt som vi skapar med olika namn, slutligen genom att tillämpa ko.applyBinding vi kommer att berätta vilket block HTML var och en måste tillhöra och därmed kommer vi att uppnå målet med detta exempel.
Låt oss sedan se i följande kod hur vi uttrycker allt som vi har förklarat tidigare:
Avancerad databindningLåt oss se i följande bild hur vårt exempel ser ut när vi kör det i webbläsaren:
FÖRSTORA
Vi ser på bilden att våra två ViewModels effektivt tillämpas de i vår HTML, var och en som ingår i elementet som vi skickar som den andra parametern till metoden ko.applyBindings () vilket ger oss en uppfattning om hur vi kan tillämpa det mer fullständigt i våra applikationer.
Bindningar och TinyMCE
För detta exempel kommer vi att bygga en funktionalitet anpassad till den verkliga världen, vi kommer att bygga en bindande avancerad för att hjälpa oss att införliva redaktören TinyMCE i vår HTML, vad den här redaktören gör är att bygga ett gränssnitt WYSIWYG, det vill säga en rik textredigerare. Den största svårigheten med detta genomförande är att vi måste skapa våra egna bindande, vilket kan orsaka huvudvärk om vi inte har en adekvat guide, som vi kommer att ha nu.
KravFör att genomföra detta exempel måste vi ladda ner några externa resurser, i det här fallet jQuery i den senaste versionen, förutom att ladda ner TinyMCE och inkludera det i vårt projekt, för att få de resurser vi helt enkelt måste göra en snabb sökning i Google så vi kommer inte att stanna kvar länge på denna punkt. Det andra vi behöver är att skapa en ny fil som heter kobinding.js det är där vi kommer att skriva den nödvändiga koden så att vår lösning kan fungera korrekt. När vi har laddat ner alla våra resurser och på en sökväg som vi kan komma åt från vår applikation kan vi sedan skriva vår kod.
Vad ansökan kommer att göra är att ge oss en förhandsvisning av det vi skriver, för detta kommer vi att skapa ett formulär där vi kommer att placera vår textruta som kommer att ha vid TinyMCE, en återställningsknapp för att återställa allt till utgångsläget och slutligen a där vi kommer att ta emot texten som vi skriver.
Slutligen kommer vi att inkludera alla våra resurser inklusive den nya filen kobinding.js och vi bygger den nödvändiga koden för vår ViewModel med en märkbar som gör att vi kan upptäcka ändringarna i vår textruta, låt oss se hur vår kod ser ut:
Avancerad databindning TinyMCE Återställ innehållOm vi tittar på koden och vi har följt föregående självstudier kommer vi att märka att det inte finns något som kan orsaka tvivel, men om vi kör detta i vår webbläsare fungerar det inte på det sätt som vi har förklarat och det beror på att vi behöver en bindande anpassad i vår nya fil.Förhandsvisning
Vad den här nya koden gör är en länk mellan beteendet hos TinyMCE och vår ViewModel, för detta kommer vi att skapa två funktioner eller metoder som kallas i det Y uppdatering, för metoden i det som namnet antyder är när vi initierar vår komponent, här ställer vi in bindande av textområdet med TinyMCE så att vi kan tillämpa det observerbara, dessutom definierar vi händelsen förändra vilket är när tillståndet och innehållet i vår textruta ändras, så att vi kan uppdatera innehållet i realtid.
Den andra metoden eller funktionen är uppdatering, aktiveras detta varje gång det sker förändringar i det länkade elementet, till exempel knappen för att återupprätta innehållet, vilket det gör är att det är direkt kopplat till vad det observerbara som vi skapat tidigare ger oss. Låt oss se den slutliga koden då för vår 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 (function () {$ (element) .tinymce (tinymceOptions);}, 0); ko.utils ['domNodeDisposal']. addDisposeCallback (element, funktion () {$ (element) .tinymce (). ta bort ();}); }, 'update': function (element, valueAccessor, allBindings) {var tinymce = $ (element) .tinymce (), value = valueAccessor () (); if (tinymce) {if (tinymce.getContent ()! == värde) {tinymce.setContent (värde); }}}};Om vi kör igen i vår webbläsare kommer vi att se att allt fungerar som det ska, i skrivande stund och om vi ändrar fokus ser vi att i vårt förhandsgranskningsområde har vi innehållet som det ska se ut:
FÖRSTORA
Med detta kunde vi skapa en avancerad bindning och personligt som hjälper oss att förstå allt vi kan uppnå med lite uppfinningsrikedom och alla verktyg som det ger oss Knockout. Fall som det här TinyMCE De är mycket vanliga, eftersom denna typ av plug-in är mycket populär i utvecklingen av webbapplikationer, så vi kan behöva använda en liknande lösning någon gång i utvecklingen av vårt projekt.
Med detta har vi avslutat denna handledning, eftersom vi ser att det inte är nödvändigt att begränsa oss till funktionerna och förutbestämda metoderna i KnockoutNaturligtvis finns det funktioner som fortfarande är mycket avancerade för denna kunskapsnivå men som kan uppnås med praktik och forskning. Det intressanta är att allt detta kan uppnås med lite läsning av den officiella dokumentationen av Knockout och letar också efter exempel som hjälper oss att illustrera och placera oss själva i ett sammanhang.
