Съдържание
Прехвърлянето на най -трудната част от приложението към клиентската страна става все по -често срещано, като по този начин сървърните езици се прехвърлят само към тези, които се справят с постоянството чрез услуги ПОЧИВКА.Част от отговорността всичко това да се случи се пада върху новите начини за работа JavaScript и генерирането на динамични и отзивчиви потребителски интерфейси, благодарение на различните рамки съществуващ.
Тази рамка има много силни страни, като ниското й тегло и нейната документация, както и че тя е на пазара от дълго време, така че непрекъснато узрява, за да може да се прилага в производствени среди.
1- Подобно на повечето библиотеки и рамки на JavaScript изискванията не са толкова взискателни, в този случай ще ни е необходим малък уеб сървър, за да обработим по -добре нашите заявки, може да бъде Wamp в Windows или екземпляр на Apache в Linux или Mac.
2- Нуждаем се от богат текстов редактор в стила на Възвишен текст или NotePad ++ да може да напише необходимия код, за да изпълни примерите и упражненията, които ще покажем.
3- Накрая се нуждаем от достъп до Интернет, за да можем да изтегляме Knockout.js дори веднъж.
Процесът на инсталиране е доста прост и не зависи от конкретна платформа, процесът ще бъде същият, независимо дали се намираме Windows, Linux или MAC.
Първото нещо, което трябва да направим, е да изтеглите Knockout.js от официалната му страница, за това можем да отидем на уебсайта на проекта и в раздела на изтегляния щракваме с десния бутон и избираме опцията Запази линка като:
Увеличете
След като имаме файла, просто трябва да го включим във файл HTML както следва:
Инсталиране на Knockout.jsКакто виждаме, трябваше само да включим изтегления файл чрез скриптов маркер. В случай, че искаме да работим с версията на CDN Трябва само да променим локалния път към интернет пътя на файла, това е много подобно на работата с библиотеки като jQuery или рамки като AngularJS.
Модел Изглед Модел ИзгледЗаглавието на този раздел може да изглежда като грешка. Как е възможно да се говори за Model View View Model? Не е ли същото? Оказва се, че Нокаут има модел на дизайн или парадигма за развитие, откъдето има вдъхновение MVC, където със сигурност е Модел и Изглед те се държат като това, което знаем от "класическия" подход, но имаме нов слой, наречен ViewModel която отговаря за обединяването и придаването на функционалност на нашите възгледи.
Свързване на данни е основната характеристика на нашата рамка, която ни позволява да посочим документа HTML кои са елементите, до които трябва да дадете достъп Knockout.js, въпреки че звучи като нещо сложно, можем да го обобщим като нещо по -просто, това е простото прилагане на свойства към елементите на дървото СЛЪНЦЕ където искаме да има представяне Knockout.js.
Нека видим следния примерен код, да речем, че искаме да отпечатаме име от нашия ViewModel върху етикет вътре в тяло, за това трябва да направим само следното:
Инсталиране на Knockout.jsВиждаме това в нашия етикет h1 има span tag и span tag има свойство, което не е родно за HTML какъв е имотът обвързване на данни, това ни кара да се свързваме Knockout.js с нашето DOM дърво в този случай ние просто сме посочили, че името на свойството или променливата трябва да бъде взето от нашето ViewModel.
Ако изпълним нашия пример в браузъра, ще получим резултат като този, който можем да видим на следното изображение:
Вече трябва да сме осъзнали тази философия ViewModel е важна част от работата в Knockout.js, затова ще продължим да се занимаваме малко повече по темата.
Създаване на VistaModelИма два начина за създаване на изглед на модел, основната форма и обектно-ориентираната, която използваме вече зависи от начина ни на разработване, въпреки че препоръчителният е обектно ориентирана тъй като въпреки че е по -сложен в началото, той ни позволява да постигнем по -добър ред в нашето приложение.
За да създадете a ViewModel основни, просто трябва да направим нещо като следното:
var myModelView = {име: 'Педро Перес'};Както го виждаме, той изобщо не е сложен, ние просто дефинираме променлива и поставяме стилово съдържание върху нея. JSON.Сега пътят обектно ориентирана ни позволява да създаваме методи за достъп и манипулиране на свойствата, които искаме да поставим в нашите ViewModel, за това можем да направим нещо като следното:
var myOOOOOOFModelView = function () {var self = this; self.name = 'Джонатан'; self.lastname = 'Акоста'; self.getName = function () {връщане на self.name + '' + self.last име; };};Ако искаме в този случай можем директно да получим достъп до името или фамилията поотделно или да използваме метода getName () което ни дава името и фамилията, свързани или свързани.Тук мнозина могат да се чудят дали не е по -лесно да се направи соло Низ С името и фамилията отговорът е много прост, колкото повече възможности имаме, толкова по -лесно ще бъде приложението според нас, представете си, че искаме само името, с основната форма, която би трябвало да обработим низа, за да бъде в състояние да ги разделим, при обектно-ориентирана промяна имаме достъп само до имота, който ни интересува.
Досега това, което видяхме, е много статично, какво ще стане, ако сега започнем да използваме параметри, по този начин a ViewModel Той може да служи за много цели, тъй като няма да се ограничаваме до това, което установяваме, но можем да променим данните според ситуацията.
Нека пренапишем формата си обектно ориентиранаи ще използваме следната форма:
var myOOOOOOOFModelView = функция (име, фамилия) {var self = this; self.name = име; self.lastname = фамилия; self.getName = function () {връщане на self.name + '' + self.last име; };};Както видяхме, че беше много лесно да се приложи използването на параметри, сега ще приложим това в първия си пример и по този начин ще видим как всичко се вписва на мястото си, за това ще използваме следния HTML код:
Инсталиране на Knockout.jsТук първото нещо, което забелязваме, е, че обвързване на данни вече не е така текст както в първоначалния пример, ако не използваме html, това ни позволява да изпращаме етикети html и по този начин да можем да придадем повече стил на нашия отговор от ViewModel.
Вече в раздела, където определяме нашия ViewModel виждаме, че преди да приложим обвързващ на Knockout.js, ние правим екземпляр от нашия ViewModel обектно ориентирани, Точно в този момент можем да дадем стойностите на нашите параметри или свойства, както можем да видим, че запазихме разделението на име и фамилия, но в крайна сметка можем да използваме метода, който ги свързва.
Когато изпълняваме нашия пример, той ни дава следните резултати в браузъра:
С това приключваме нашия урок, с който успешно направихме първите си стъпки Knockout.js, с това можем да започнем да мислим за всички възможности, които тази рамка за разработка на приложения ни предлага с клиентска логика.
