Sarežģītu lietojumprogrammu rakstīšana ir saistīta ar koda sarežģītības palielināšanos, lai gan tas parasti notiek, nav aksioma vai noteikts noteikums, patiesībā vislabāk būtu, ja mūsu lietojumprogramma būtu sarežģīta daudzu mazu lietojumprogrammu apvienošanas dēļ, tā kā viena vienkārša maza lietotne padarītu izstrādātāja dzīvi mazāk sarežģītu.
Gadījumā, ja Knockout.js kaut kas līdzīgs notiek ar stiprinājumi, kur ir uzvedība, ko mēs varam sasniegt, izmantojot stiprinājumi Tomēr tas galu galā radītu lielu sarežģītību, jo tas mums nedaudz mazina elastību, tāpēc mēs nesakām, ka stiprinājumi pamati ir slikti, vienkārši ir brīži, kad tie mums nedarbotos pareizi.
Uzlabotas saitesTāpēc mums jāizmanto uzlabotas saites, šeit mēs varam izveidot savu stiprinājumi ar uzvedību, ko mēs definējam tieši, ietaupot mums zināmu koda sarežģītības pakāpi un iegūstot lasāmību, vienīgais trūkums to nosaucot ir tas, ka mēs veidotu šo uzvedību gandrīz no nulles, padarot koda atkārtotu izmantošanu par nulli.
Piesaistiet divus vai vairākus ViewModels modeļus
Ir reizes, kad mūsu ViewModels vajadzētu palikt pēc iespējas vienkāršākam, vai varbūt mums jāizmanto a ViewModel kas ir kopīgs katrā mūsu lietojumprogrammas lapā, jebkurā gadījumā prasība izmantot vairākas ViewModels tajā pašā laikā tas paliek.
Kā tas darbojas?Pirms raizēties par šo jautājumu, ir labi zināt, ka tas nav nekas traks un nav neiespējams, patiesībā tā ir ļoti izplatīta prakse, lai pieteikumā saglabātu mūsu koda vienkāršību un lasāmību. Lai tas notiktu, metodei ir jānodod tikai otrs parametrs ko.applyBindings kas palīdzēs mums sasniegt šo mērķi, ierobežojot saistošs uz HTML kas to satur, šādā veidā mēs varam izmantot visus ViewModel kas mums ir vajadzīgi bez jebkādām neērtībām
Apskatīsim nelielu piemēru, kur mēs to padarīsim iespējamu, pirmkārt, mēs veidosim a HTML kur mums būs divi elementi katrs ar nosaukumu ViewModel atšķirīgs, tas dos mums pamatu tam, ko mēs vēlamies sasniegt, un katrā ievadē mēs vienkārši ievietosim a datu saistīšana tipa tekstu.
Jau daļā JavaScript mēs definēsim savu ViewModel vispārīgi, kur mēs atgriezīsim atribūtu ar nosaukumu Vārds un, veidojot to piemēru, mēs izveidosim a viewModel1 un a viewModel2 kas būs gadījumi ViewModel vispārīgi, ko mēs veidojam, izmantojot dažādus nosaukumus, visbeidzot, piemērojot ko.applyBinding mēs pateiksim, kurš bloks HTML katram ir jāpieder, un tādējādi mēs sasniegsim šī piemēra mērķi.
Tālāk šajā kodā redzēsim, kā mēs izsakām visu, ko esam iepriekš izskaidrojuši:
Uzlabota datu saistīšanaTālāk redzamajā attēlā redzēsim, kā izskatās mūsu piemērs, kad to palaižam pārlūkprogrammā:
PALIELINĀT
Attēlā redzam, ka mūsu divi ViewModels efektīvi tie tiek izmantoti mūsu HTML, katrs no tiem ir iekļauts elementā, ko mēs nododam kā otro parametru šai metodei ko.applyBindings () tādējādi dodot mums priekšstatu par to, kā mēs varam to pilnīgāk izmantot savās lietojumprogrammās.
Bindings un TinyMCE
Šajā piemērā mēs veidosim funkcionalitāti, kas pielāgota reālajai pasaulei, mēs izveidosim a saistošs uzlabotas, lai palīdzētu mums iekļaut redaktoru TinyMCE mūsu HTMLŠis redaktors izveido saskarni WYSIWYG, tas ir, bagātināta teksta redaktors. Šīs ieviešanas galvenās grūtības ir tādas, ka mums ir jāizveido savs saistošs, kas mums var sagādāt galvassāpes, ja mums nav atbilstoša ceļveža, kas mums būs tagad.
PrasībasLai izpildītu šo piemēru, mums šajā gadījumā ir jālejupielādē daži ārējie resursi jQuery tā jaunākajā versijā papildus lejupielādes TinyMCE un iekļaut to mūsu projektā, lai iegūtu resursus, kas mums vienkārši jāveic, lai ātri meklētu Google tāpēc mēs šajā jautājumā ilgi nevilksimies. Otra lieta, kas mums būs nepieciešama, ir izveidot jaunu failu ar nosaukumu kobinding.js kur mēs uzrakstīsim nepieciešamo kodu, lai mūsu risinājums varētu pareizi darboties. Kad visi mūsu resursi ir lejupielādēti un ceļā, kuram varam piekļūt no savas lietojumprogrammas, mēs varam uzrakstīt savu kodu.
Pieteikums mums dos a priekšskatījums par to, ko mēs rakstām, šim nolūkam mēs izveidosim veidlapu, kurā ievietosim savu tekstlodziņu TinyMCE, atiestatīšanas poga, lai viss atgrieztos sākotnējā stāvoklī un visbeidzot a kur mēs saņemsim tekstu, ko mēs rakstām.
Visbeidzot, mēs iekļausim visus mūsu resursus, ieskaitot jauno failu kobinding.js un mēs izveidojam nepieciešamo kodu ViewModel ar novērojams kas ļauj mums noteikt izmaiņas mūsu tekstlodziņā, apskatīsim, kā izskatās mūsu kods:
Uzlabota datu saistīšana TinyMCE Reset ContentJa paskatāmies uz kodu un esam ievērojuši iepriekšējās apmācības, mēs pamanīsim, ka nekas nevar radīt šaubas, tomēr, ja mēs to palaižam savā pārlūkprogrammā, tas nedarbosies tā, kā mēs esam paskaidrojuši, un tas ir tāpēc, ka mēs vajag a saistošs pielāgots mūsu jaunajā failā.Priekšskatīt
Šis jaunais kods ir saikne starp TinyMCE un mūsējais ViewModel, šim nolūkam mēs izveidosim divas funkcijas vai metodes, ko sauc tajā Y Atjaunināt, par metodi tajā kā norāda nosaukums, inicializējot savu komponentu, mēs šeit iestatām saistošs no teksta zonas ar TinyMCE lai mēs varētu izmantot novērojamo, mēs arī definēsim notikumu mainīt kad mainās mūsu tekstlodziņa stāvoklis un saturs, lai mēs varētu atjaunināt saturu reālā laikā.
Otra metode vai funkcija ir Atjaunināt, tas tiek aktivizēts katru reizi, kad tiek veiktas izmaiņas saistītajā elementā, piemēram, poga, lai atjaunotu saturu, un tas ir tieši saistīts ar to, ko mums iepriekš nodrošinājis novērojums. Apskatīsim galīgo kodu mūsu gadījumā kobinding.js:
ko.bindingHandlers.tinymce = {init: function (elements, valueAccessor, allBindingsAccessor) {var tinymceOptions = {setup: function (editor) {editor.on ('change', function (event) {valueAccessor () (event.target). getContent ());}); }}; $ (elements) .text (valueAccessor () ()); setTimeout (funkcija () {$ (elements) .tinymce (tinymceOptions);}, 0); ko.utils ['domNodeDisposal']. addDisposeCallback (elements, funkcija () {$ (elements) .tinymce (). noņemt ();}); }, 'update': function (elements, valueAccessor, allBindings) {var tinymce = $ (elements) .tinymce (), value = valueAccessor () (); if (tinymce) {if (tinymce.getContent ()! == vērtība) {tinymce.setContent (vērtība); }}}};Ja mēs atkal darbināmies savā pārlūkprogrammā, mēs redzēsim, ka rakstīšanas laikā viss darbojas tā, kā vajadzētu, un, mainot fokusu, mēs redzēsim, ka mūsu priekšskatījuma apgabalā saturs ir tāds, kādam tam vajadzētu izskatīties:
PALIELINĀT
Ar to mēs varējām izveidot a uzlabota iesiešana un personalizēts, kas palīdz mums saprast visu, ko varam sasniegt ar nelielu atjautību, un visus instrumentus, ko tas mums dod Nokauts. Tādi gadījumi kā TinyMCE Tie ir ļoti izplatīti, jo šāda veida spraudņi ir ļoti populāri tīmekļa lietojumprogrammu izstrādē, tāpēc mums, iespējams, būs jāpiemēro līdzīgs risinājums kādā projekta izstrādes brīdī.
Ar to mēs esam pabeiguši šo apmācību, jo mēs redzam, ka nav jāaprobežojas ar funkcijām un iepriekš izveidotām metodēm NokautsProtams, ir funkcijas, kas joprojām ir ļoti attīstītas attiecībā uz šo zināšanu līmeni, bet kuras var sasniegt ar praksi un pētījumiem. Interesanti ir tas, ka to visu var panākt, nedaudz izlasot oficiālo dokumentāciju Nokauts kā arī meklēt piemērus, kas palīdz mums ilustrēt un ievietot sevi kontekstā.
