За повечето уеб приложения фактът, че могат да събират въвеждане от потребителите чрез формуляри, е тяхната основна функция, но това може да бъде оставено настрана, ако приложението като такова не може да изпраща или получава данните на сървъра.
Ето защо има езици от страна на сървъра или обработката на JSON да ни помогне в тази задача, където за целите на този урок ще използваме jQuery като рамка на JavaScript за извършване на обработката на JSON, която ще служи за замяна на езика на сървъра и ще ни предостави въвеждане на данни, които да бъдат обработени в нашия модел.
Изисквания
Ще трябва да имаме Knockout.js в нашата система и достъпни за приложенията, които ще създаваме, също се нуждаем jQuery които можем да използваме локално или от вашия CDN. Разрешения за писане на файлове, интернет връзка за получаване на библиотеките, ако нямаме такива, и текстов редактор като Възвишен текст или NotePad ++. За да стартираме приложенията, се нуждаем от тип уеб сървър Apache или Nginx в нашата тестова среда.
Ще започнем да работим директно върху приложението и няма да задълбаваме в някои от концепциите, използвани в примерите, затова препоръчваме да се разходите през уроците, които включват динамични промени, обработка на формуляри и разбира се обвързване с Knockout.js.
Четене на външни данни
Ще създадем прост HTML документ, който ще включва библиотеката на Knockout.js както и jQuery. Ние ще създадем нашата форма, без да забравяме да я направим обвързвания на елементите в него и накрая в логиката за нашата ViewModel Ще създадем функцията за обработка на промените в нашата форма с наблюдаеми, нека видим кода за нашия HTML:
Външни данниКакто виждаме имаме документ HTML Прост с няколко елемента, състоящ се от две текстови полета и списък за избор и ако сме наблюдатели, можем да видим, че нашите наблюдаеми са еднакво празни, за да завършим, нека видим как изглежда нашата първоначална форма:Пълно име:
Фамилия:
Любими занимания:Качване на данни
Тъй като имаме нашата форма, трябва да осмислим нашия пример и да можем да заредим външни данни в нашето приложение, затова нашите наблюдаеми са празни. Нека използваме метода jQuery, наречен $ .getJSON () който получава a JSON Като вход, в случай че работихме със сървърно-езиков език, трябва да посочим пътя на файла, който ще го генерира като изход, както следва:
self.loadUserData = function () {$ .getJSON ("/ get-user-data", функция (данни) {alert (data.name);}); }За да не усложняваме нещата, ще използваме a JSON вече генерирани в нашето приложение, за това създаваме такъв със следната структура, който може да променя стойностите си, ако желаят:
{"first name": "First name", "last name": "Last name", "activities": ["Bicycle", "Videogames", "Web development"], "hobbies": "Read"}Сега можем да променим предишната си функция и да й изпратим като параметър името на нашия JSON файл, нека видим:
self.loadUserData = function () {$ .getJSON ("user_information.json", function (data) {alert (data.name);}); }Като включим тази функция в нашия код, можем да проверим как работи нашият метод $ .getJSON () и по този начин да получим една от стойностите в него, отговора на нашето приложение при натискане на бутона Заредете данни, то просто ще показва името.
Както виждаме, че нашият метод работи перфектно, сега трябва само след получаване на стойностите на нашия JSON да включим функцията в нашия ViewModel и направете съответствие с идентификаторите на нашата форма, нека видим как изглежда крайният ни код:
функция UserViewModel () {var self = this; self.name = ko.observable (""); self.lastname = ko.observable (""); self.activities = ko.observableArray ([]); self.hobbies = ko.observable (""); self.loadUserData = function () {$ .getJSON ("user_information.json", function (data) {self.name (data.name); self.lastname (data.lastname); self.activities (data.activities); self.hobbies (data.hobbies);}); }} ko.applyBindings (нов UserViewModel ());Сега остава само да стартираме нашия пример в браузъра и да натиснем бутона Качване на данни който трябва незабавно да попълни полетата на нашата форма със стойностите на JSON, да видим:
Както виждаме, той работи перфектно и успяхме да прочетем външни данни в няколко прости реда код. Това е доста полезно по отношение на използваемостта и функционалността на нашето приложение, но можем да направим малко повече, можем да съхраняваме данните в JSON и по този начин да разширим функционалността на нашето приложение.
Съхраняване на данните
За конвенционалните уеб приложения съхраняването на данните във формат JSON е толкова просто, колкото преобразуването на обекти в този формат и изпращането им до сървъра, но в случай на приложения, които използват Knockout.js въпросът е малко по -сложен, тъй като ViewModel използвайте наблюдаеми вместо нормални свойства на JavaScript, тъй като наблюдаемите са функции и опитите да ги сериализирате и изпратите до сървъра може да доведе до неочаквани резултати.
ko.toJSON ()За тези случаи имаме късмет, тъй като Knockout.js осигурява просто и ефективно решение, функцията ko.toJSON (), който замества всички свойства на наблюдаваните обекти с тяхната текуща стойност и връща резултата като низ във формата JSON.
За да внедрим тази нова функционалност в нашето приложение, ние ще създадем нов бутон във формата ни, наречен Запазване на данни и нашата функция ще бъде обвързана saveDataНека да видим как изглежда нашият код с промените:
Външни данниАко изпълним нашия пример в браузъра, виждаме как имаме нов бутон, зареждаме нашите стойности, които ако искаме, можем да ги променим. Накрая натискаме съответния бутон, който трябва да ни покаже стойностите във формата ни като низ във формат JSON, нека видим как изглежда:Пълно име:
Фамилия:
Любими занимания:Качване на данни
Запазване на данни
Увеличете
И накрая, ако искаме тези данни да бъдат изпратени до скрипт на нашия сървър, трябва само да направим някои промени в нашата новосъздадена функция и когато използваме метода $ .post завършваме процеса, за да завършим, нека видим как изглежда:
self.gsaveData = function () {var data_submit = {userData: ko.toJSON (self)}; $ .post ("/ save-data", data_send, function (data) {alert ("Информацията е изпратена до сървъра");}); }
Съпоставяне на данни за преглед на модели
Начинът, по който обработваме нашата информация от JSON, е всичко, от което се нуждаем, за да създадем стабилни приложения и да внедрим всякакъв вид независими от езика решения от страна на сървъра, стига те да се обработват с JSON.
Но можем да отидем малко по -далеч и автоматично да картографираме JSON данните от сървъра към нашия ViewModel и можем да постигнем това с приставка за Knockout.js Наречен нокаут-картографиране. За да започнем да го използваме, първо трябва да го изтеглим от неговото хранилище на GitHub, да го разархивираме в рамките на нашия проект и да го включим след нашата рамка, за да избегнем грешки поради липсата на зависимости.
Сега просто трябва да променим кода си и да премахнем нашия бутон Заредете данни, както и цялата логика на Knockout.js, тъй като благодарение на нашия плъгин получаването на информацията ще бъде много по-лесно, нека видим нашия окончателен код:
Външни данниКакто виждаме, логиката ни е сведена до само три реда код, което прави, когато приложението ни се зареди, веднага прави заявка Аякс от JSON което трябва да съответства на елементите на нашата форма. Това отнема родните обекти на JavaScript и трансформира всяко свойство в наблюдаемо, като избягва всички тези редове код и прави не само нашето приложение по -стабилно, но и кода ни по -четим.Пълно име:
Фамилия:
Любими занимания:
За да завършим, ако стартираме нашето приложение, виждаме как автоматично нашите стойности се зареждат във формата ни и можем да видим заявката Аякс заедно с JSON за отговор, ако използваме конзолата на браузъра:
Така завършихме този урок, където можехме да видим как Knockout.js предлага ни начин за изпращане и съхраняване на данни, независимо от езика на страната на сървъра, който се използва, това ни дава по-голяма свобода в нашето изпълнение, като само променяме езика на сървъра на PHP, Ruby или Python да назовем няколко.
