Išplėstiniai susiejimai „Knockout.js“

Sudėtingų programų rašymas yra susijęs su padidėjusiu kodo sudėtingumu, nors dažniausiai tai nėra aksioma ar nusistovėjusi taisyklė, tačiau iš tikrųjų būtų geriausia, jei mūsų programa būtų sudėtinga dėl daugelio mažų programų sąjungos, kadangi viena paprasta programėlė kūrėjo gyvenimą apsunkintų.

Jeigu Knockout.js kažkas panašaus atsitinka apkaustai, kur yra elgesio, kurį galime pasiekti naudodami apkaustai Tačiau galų gale tai sukeltų didelį sudėtingumą, nes tai mums šiek tiek sumažintų lankstumą, todėl nesakome, kad apkaustai pagrindai yra blogi, tiesiog būna atvejų, kai jie mums netinkamai veikia.

Išplėstiniai apkaustaiŠtai kodėl mes turime naudoti pažangūs apkaustai, čia mes galime sukurti savo apkaustai su elgesiu, kurį mes apibrėžiame tiesiogiai, sutaupydami tam tikro sudėtingumo kodo ir įgydami skaitomumą, vienintelis jo pavadinimo trūkumas yra tas, kad mes sukurtume tokį elgesį beveik nuo nulio, todėl kodas nebūtų pakartotinai naudojamas.

Įriškite du ar daugiau „ViewModels“
Yra laikai, kai mūsų „ViewModels“ turėtų likti kuo paprastesnis, o gal reikia naudoti a „ViewModel“ kuris bendrinamas kiekviename mūsų programos puslapyje, bet kuriuo atveju reikalavimas turėti galimybę naudoti kelis „ViewModels“ tuo pačiu ir lieka.

Kaip tai veikia?Prieš pradėdami nerimauti dėl šios problemos, gerai žinoti, kad tai nėra kažkas beprotiško ir to neįmanoma padaryti, iš tikrųjų tai yra labai įprasta praktika, kad programoje būtų išlaikytas mūsų kodo paprastumas ir skaitomumas. Kad tai įvyktų, metodui turime perduoti tik antrą parametrą ko.applyBindings tai padės mums pasiekti šį tikslą ribojant privalomas į HTML kuriame tai yra, tokiu būdu galime pritaikyti visus „ViewModel“ kad mums reikia be jokių nepatogumų

Pažiūrėkime nedidelį pavyzdį, kuriame tai padarysime, pirmiausia ketiname sukurti a HTML kur turėsime du elementus kiekvienas su vardu „ViewModel“ skirtingas, tai suteiks mums pagrindą to, ko norime pasiekti, ir kiekviename įėjime mes tiesiog įdėsime a susieti duomenis teksto tipo.

Jau dalyje „JavaScript“ apibrėšime savo „ViewModel“ bendrai, kur grąžinsime atributą, vadinamą vardas o jų pavyzdžio metu mes sukursime a viewModel1 ir a viewModel2 kurie bus pavyzdžiai „ViewModel“ bendrus, kuriuos kuriame, naudodami skirtingus pavadinimus, galiausiai taikydami ko.applyBinding mes pasakysime, kuris blokas HTML kiekvienas turi priklausyti ir taip pasieksime šio pavyzdžio tikslą.

Pažiūrėkime toliau pateiktame kode, kaip išreiškiame viską, ką anksčiau paaiškinome:

 Išplėstinis duomenų įrišimas

Toliau pateiktame paveikslėlyje pažiūrėkime, kaip atrodo mūsų pavyzdys, kai jį paleidžiame naršyklėje:

DIDELIS

Vaizde matome, kad mūsų du „ViewModels“ veiksmingai jie yra taikomi mūsų HTML, kiekvienas iš jų yra elemente, kurį perduodame kaip antrąjį metodo parametrą ko.applyBindings () taip suteikiant mums idėją, kaip galėtume ją visapusiškiau pritaikyti savo programose.

Įrišimai ir „TinyMCE“
Šiame pavyzdyje mes sukursime funkcionalumą, pritaikytą realiam pasauliui, mes sukursime a privalomas Išplėstinė, kad padėtų mums įtraukti redaktorių „TinyMCE“ mūsų HTMLŠis redaktorius sukuria sąsają WYSIWYG, ty turtingo teksto redaktorius. Pagrindinis šio įgyvendinimo sunkumas yra tas, kad turime sukurti savo privalomas, kuris mums gali sukelti galvos skausmą, jei neturėsime tinkamo vadovo, kurį turėsime dabar.

ReikalavimaiNorėdami atlikti šį pavyzdį, šiuo atveju turime atsisiųsti keletą išorinių išteklių „jQuery“ naujausioje versijoje, be to, kad atsisiųstumėte „TinyMCE“ ir įtraukite jį į mūsų projektą, kad gautumėte išteklių, kurių mums tiesiog reikia greitai ieškoti „Google“ todėl ilgai nesigilinsime į šį klausimą. Kitas dalykas, kurio mums reikės, yra sukurti naują failą pavadinimu kobinding.js kur mes parašysime reikiamą kodą, kad mūsų sprendimas galėtų tinkamai veikti. Atsisiuntę visus išteklius ir pasiekę kelią iš savo programos, galime parašyti savo kodą.

Programa mums duos a peržiūrėti to, ką rašome, tam sukursime formą, kurioje įdėsime teksto laukelį, kuris bus „TinyMCE“, atstatymo mygtuką, kad viskas būtų grąžinta į pradinę būseną, ir galiausiai a kur gausime tekstą, kurį rašome.

Galiausiai įtraukiame visus savo išteklius, įskaitant naują failą kobinding.js ir mes sukuriame reikiamą kodą savo „ViewModel“ su stebimas tai leidžia aptikti teksto laukelio pakeitimus, pažiūrėkime, kaip atrodo mūsų kodas:

 Išplėstinis duomenų įrišimas „TinyMCE“ iš naujo nustatyti turinį
Peržiūra

Jei pažvelgsime į kodą ir laikysimės ankstesnių pamokų, pastebėsime, kad niekas negali sukelti mums abejonių, tačiau jei tai paleidžiame savo naršyklėje, ji neveiks taip, kaip paaiškinome. Reikia privalomas pritaikytas mūsų naujame faile.

Šis naujas kodas daro ryšį tarp „TinyMCE“ ir mūsų „ViewModel“, tam mes sukursime dvi funkcijas arba metodus, vadinamus iniciat Y atnaujinti, dėl metodo iniciat kaip rodo jo pavadinimas, kai inicijuojame savo komponentą, čia nustatome privalomas iš teksto zonos su „TinyMCE“ kad galėtume pritaikyti stebimą, papildomai apibrėžsime įvykį keistis kai pasikeičia mūsų teksto laukelio būsena ir turinys, kad galėtume atnaujinti turinį realiuoju laiku.

Kitas metodas ar funkcija yra atnaujinti, tai įjungiama kiekvieną kartą, kai pasikeičia susietas elementas, pvz., mygtukas, skirtas atkurti turinį, o tai daro tai, kad jis yra tiesiogiai susijęs su tuo, ką mums sukūrė stebimas objektas. Pažiūrėkime galutinį kodą kobinding.js:

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

Jei vėl paleisime savo naršyklę, pamatysime, kad rašymo metu viskas veikia taip, kaip turėtų, o jei pakeisime fokusą, pamatysime, kad mūsų peržiūros srityje turinys yra toks, koks turėtų atrodyti:

DIDELIS

Su tuo mes galėjome sukurti a pažangus įrišimas ir suasmeninta, kuri padeda mums suprasti viską, ką galime pasiekti, turėdami šiek tiek išradingumo ir visas priemones, kurias ji mums suteikia Nokautas. Tokie atvejai kaip „TinyMCE“ Jie yra labai paplitę, nes tokio tipo papildiniai yra labai populiarūs kuriant žiniatinklio programas, todėl mums gali tekti pritaikyti panašų sprendimą tam tikru projekto vystymo momentu.

Tai baigėme, nes matome, kad nebūtina apsiriboti funkcijomis ir iš anksto nustatytais metodais. NokautasŽinoma, yra funkcijų, kurios vis dar yra labai pažengusios šiam žinių lygiui, tačiau jas galima pasiekti naudojant praktiką ir tyrimus. Įdomu tai, kad visa tai galima pasiekti šiek tiek perskaičius oficialius dokumentus Nokautas taip pat ieškome pavyzdžių, padedančių mums iliustruoti ir įsitraukti į kontekstą.