Писање сложених апликација везано је за повећање сложености кода, иако се то обично не дешава аксиом или утврђено правило, у ствари би било најбоље да је наша апликација сложена због сједињења многих малих апликација, будући да би једна једноставна мала апликација учинила живот програмера мање компликованим.
У случају Кноцкоут.јс нешто слично се дешава и са везивања, где постоје понашања која можемо постићи помоћу везивања Међутим, ово би на крају генерирало велику сложеност јер нас то смањује на мало флексибилности, с тиме не кажемо да везивања основе су лоше, једноставно постоје тренуци када за нас не би радиле како треба.
Напредно везивањеЗато морамо да користимо напредна везивања, овде можемо сами да изградимо везивања са понашањима која дефинишемо директно, штедећи нам одређени степен сложености кода и постижући читљивост, једини недостатак позивања је тај што бисмо то понашање изградили готово од нуле, чинећи поновну употребу кода ништавим.
Повежите два или више ВиевМодел -а
Постоје тренуци када су наши ВиевМоделс треба да остане што је могуће једноставније, или можда треба да користимо а ВиевМодел који се дели на свакој страници наше апликације, у сваком случају услов да можете да користите неколико ВиевМоделс истовремено остаје.
Како то функционише?Пре него што се забринете око овог питања, добро је знати да то није нешто лудо и немогуће учинити, у ствари је врло уобичајена пракса да се у апликацији задржи једноставност и читљивост нашег кода. Да би се то догодило, морамо само да проследимо други параметар методи ко.апплиБиндингс то ће нам помоћи да постигнемо овај циљ ограничавањем везивање до ХТМЛ која га садржи, на овај начин можемо применити све ВиевМодел које су нам потребне без икаквих непријатности
Погледајмо мали пример где ћемо то омогућити, пре свега ћемо изградити а ХТМЛ где ћемо имати два елемента сваки са именом ВиевМодел другачије, ово ће нам дати основу за оно што желимо постићи и унутар сваког уноса једноставно ћемо поставити а везати за податке откуцаног текста.
Већ у делу ЈаваСцрипт ми ћемо дефинисати наше ВиевМодел генерал где ћемо вратити атрибут тзв Име и у време када ћемо направити њихову инстанцу, креираћемо а виевМодел1 и а виевМодел2 који ће бити примери ВиевМодел опћенито које стварамо користећи различита имена, коначно примјеном ко.апплиБиндинг рећи ћемо који блок ХТМЛ сваки мора припадати и на тај начин ћемо постићи циљ овог примера.
Погледајмо онда у следећем коду како изражавамо све оно што смо претходно објаснили:
Напредно везивање податакаПогледајмо на следећој слици како изгледа наш пример када га покренемо у прегледачу:
ЕНЛАРГЕ
На слици видимо да нас двоје ВиевМоделс ефективно се примењују у нашем ХТМЛ -у, сваки од њих садржи елемент који прослеђујемо као други параметар методе ко.апплиБиндингс () дајући нам на тај начин идеју како то можемо потпуније применити у својим апликацијама.
Везови и ТиниМЦЕ
За овај пример изградићемо функционалност прилагођену стварном свету, изградићемо а везивање напредни како би нам помогли да укључимо уређивач ТиниМЦЕ у нашем ХТМЛ, овај уређивач прави интерфејс ВИСИВИГ, односно уређивач богатог текста. Главна потешкоћа ове имплементације је у томе што морамо створити своју везивање, што нам може изазвати главобољу ако немамо адекватан водич, који ћемо сада имати.
ЗахтевиДа бисмо извели овај пример, морамо да преузмемо неколико спољних извора, у овом случају јКуери у најновијој верзији, поред преузимања ТиниМЦЕ и укључити га у наш пројекат, да бисмо добили ресурсе у којима једноставно морамо извршити брзу претрагу Гоогле па се нећемо дуго задржавати на овој тачки. Друга ствар која ће нам требати је да направимо нову датотеку под називом кобиндинг.јс где ћемо написати неопходан код како би наше решење могло правилно да ради. Након што преузмемо све наше ресурсе и на путу којем можемо приступити из наше апликације, тада можемо написати наш код.
Оно што ће апликација учинити је да нам да а превиев онога што пишемо, за ово ћемо створити образац у који ћемо поставити наш оквир за текст који ће имати ат ТиниМЦЕ, дугме за ресетовање за враћање свега у почетно стање и на крају а где ћемо добити текст који пишемо.
На крају ћемо укључити све наше ресурсе, укључујући нову датотеку кобиндинг.јс и ми градимо неопходан код за наш ВиевМодел са уочљиво што нам омогућава да откријемо промене у текстуалном оквиру, да видимо како изгледа наш код:
Напредно повезивање података ТиниМЦЕ Ресетуј садржајАко погледамо код и слиједимо претходне водиче, примијетит ћемо да не постоји ништа што би могло изазвати сумње, међутим ако ово покренемо у свом прегледнику, то неће функционирати на начин на који смо објаснили, а то је зато што смо треба а везивање прилагођено у нашој новој датотеци.Превиев
Оно што овај нови код ради је веза између понашања ТиниМЦЕ и наше ВиевМодел, за ово ћемо створити две функције или методе тзв у томе И ажурирање, за метод у томе као што му име говори када иницијализујемо нашу компоненту, овде постављамо везивање текстуалног подручја са ТиниМЦЕ како бисмо могли да применимо посматрано, додатно ћемо дефинисати догађај промена када се стање и садржај нашег оквира за текст мењају, тако да можемо ажурирати садржај у реалном времену.
Други метод или функција је ажурирање, ово се активира сваки пут када дође до промена у повезаном елементу, као што је дугме за поновно успостављање садржаја, што значи да је директно повезано са оним што нам пружа уочљиво које смо претходно створили. Погледајмо онда коначни код за наш кобиндинг.јс:
ко.биндингХандлерс.тинимце = {инит: фунцтион (елемент, валуеАццессор, аллБиндингсАццессор) {вар тинимцеОптионс = {сетуп: фунцтион (едитор) {едитор.он ('цханге', фунцтион (евент) {валуеАццессор () (евент.таргет. гетЦонтент ());}); }}; $ (елемент) .тект (валуеАццессор () ()); сетТимеоут (фунцтион () {$ (елемент) .тинимце (тинимцеОптионс);}, 0); ко.утилс ['домНодеДиспоситион']. аддДиспосеЦаллбацк (елемент, функција () {$ (елемент) .тинимце (). ремове ();}); }, 'упдате': фунцтион (елемент, валуеАццессор, аллБиндингс) {вар тинимце = $ (елемент) .тинимце (), валуе = валуеАццессор () (); иф (тинимце) {иф (тинимце.гетЦонтент ()! == валуе) {тинимце.сетЦонтент (валуе); }}}};Ако поново покренемо наш прегледач, видећемо да све ради како треба, у време писања, а ако променимо фокус видећемо да у нашем подручју за преглед имамо садржај онако како би требао изгледати:
ЕНЛАРГЕ
Овим смо успели да створимо напредно везивање и персонализовано које нам помаже да разумемо све што можемо постићи уз мало генијалности и све алате које нам пружа Нокаут. Случајеви попут овог ТиниМЦЕ Они су врло чести, будући да је ова врста додатка веома популарна у развоју веб апликација, па ћемо можда морати да применимо слично решење у неком тренутку у развоју нашег пројекта.
Овим смо завршили овај водич, јер видимо да није потребно ограничити се на функције и унапред утврђене методе у НокаутНаравно, постоје функционалности које су још увек веома напредне за овај ниво знања, али које се вежбом и истраживањем могу постићи. Занимљиво је да се све ово може постићи уз мало читања званичне документације Нокаут и такође тражимо примере који нам помажу да илуструјемо и ставимо себе у контекст.
