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