Разбиране на свързването на данни в Knockout.js

Свързване на данни това не е нищо повече от обединението на динамични данни или текст или HTML в различните части на дървото СЛЪНЦЕ на нашия документ, в който Knockout.js работи, това ни позволява да генерираме динамично съдържание от изгледи и модели.
Тази концепция може да се намери в голям брой рамки за развитие за JavaScript тъй като това е много ефективен начин за изразяване на логиката за развитие, затова е жизненоважно да разберем как работи и как може да улесни живота ни, когато правим нашите приложения.
ИзискванияОсновното изискване е да можете да изпълнявате Knockout.js дали сме го изтеглили или включили от a CDN. Ще ни трябва и сървър за стил Apache за обслужване на нашата страница и текстов редактор като Възвишен текст или NotePad ++, за да създадете документите, които нашите приложения ще носят.
Най -добрият начин да видите Свързване на данни е с пример, нека видим в следния код как сме създали документ HTML където включваме Knockout.js, тогава в нашето тяло сме създали етикет H1 в него правим а обвързване на данни на HTML, това означава, че чака HTML код.
В частта JavaScript просто това, което направихме, беше да създадем a изглед-модел и в него дефинирайте някои атрибути, за да можете да работите с него. Интересното е, че това ни позволява да предаваме данните от нашите изглед-модел към част от HTML. Нека да видим как изглежда нашият код:

 Свързване на данни в knockout.js 

При извикване на нашия документ от нашия браузър получаваме следния резултат:

Тук виждаме как сме изградили метод, който връща името и малко от HTML за да му придадем стил, това означава, че можем да имаме безкраен набор от възможности, но може би това, което се откроява най -много, е, че можем да приложим обвързване на данни към почти всеки артикул. Така че можем да изпращаме текст, HTML и т.н.
Но не само това, което ни позволява, е да отпечатаме текст на потребителя, ние също можем да включим CSS, класове и атрибути в нашите етикети HTML, което ни позволява да контролираме почти всеки аспект на нашата страница, без да е необходимо да задаваме статични стойности.
Нека да видим в следния пример как даваме специален клас на етикет HTML, идеята е, че можем да генерираме динамични стилове, без да е необходимо да се намесваме, когато имаме приложение, което търси шрифт ПОЧИВКА, но в този случай за опростяване ще заредим динамично само един компонент:

 Свързване на данни в knockout.js 
 

След това забелязваме как можем да предадем компонент стил което ще определи външния вид на текста, бихме могли да добавим и клас и накрая наричаме нашия текст от модела, също така забелязваме, че правим всичко това в едно и също обвързване на данни, само разделяйки различните елементи със запетаи.
Ако стартираме нашия нов пример, резултатът в нашия браузър е следният:

Увеличете

Нека обърнем специално внимание на частта от грешка за отстраняване на грешки на HTML на браузъра, тук виждаме къде са елементите на обвързване на данни те бяха ефективно пренесени към етикета.
Има и други функции, които можем да използваме с обвързване на данни, едно от тях са условните условия, тоест можем да поставим един или друг елемент в нашите етикети HTML като се вземат предвид различните свойства на нашия модел. Нека да видим следния код, където използваме пример за този стил:

 Условно свързване на данни 
 

В нашия изглед на модел дефинирахме атрибут, наречен id, който го зададохме на 0, след това в нашия HTML в раздела на свързване на данни Дефинирали сме терен оператор, където определяме дали идентификаторът на изгледа на модела е 0, той отпечатва „Здравей“, в противен случай отпечатва „Сбогом“.
Нека стартираме примера в браузъра, за да видим резултата му:

Интересно упражнение би било, ако можете да промените идентификатора на друга стойност, за да потвърдите операцията, затова го оставяме като задача.
Нещо много важно, което трябва да вземем предвид, е контекстът на нашите елементи, това е така Knockout.js използва йерархична структура на Баща син за обработка на различните свойства, които получаваме от изгледите на модела.
Това означава, че винаги работим въз основа на родител и по този начин можем да получим достъп до неговите свойства, като по този начин генерираме свойства на детето, които се различават от другите деца, които са на същото ниво, като по този начин можем да включим различни ценности.
Тъй като всичко е свързано с контекста, виждаме, че бихме могли да използваме в предишните примери текст за свързване на данни без да е необходимо да посочвате на кого принадлежи, тъй като когато това се случи, Knockout.js той веднага приема контекста на настоящото дете. Нека да видим по -долу различните видове контекст, които можем да обработваме в нашето приложение:
$ rootТова е основният контекст, откъдето произтича моделният ни изглед, когато бъде извикан от която и да е част от нашето приложение, той винаги ще търси най-йерархичната и връзката с най-висок приоритет в нашата структура, той е специален, когато имаме много деца и искаме нещо от по -големия родител.
$ родителРаботи подобно на $ root, с тази разлика, че се отнася само за непосредствения родител на нашия елемент, така че обхватът му е ограничен до това, той се използва широко, когато работим с цикли за всеки за раждане на много деца.
$ родителиДобавянето на множествено число към този контекст ни казва, че изграждаме един вид подредба или масив, който съдържа индекс за всеки от родителите на детето, откъдето го наричаме, като този $ roditelji [0] е непосредственият баща, $ roditelji [1] е родител на непосредствения родител и т.н.
$ данниТя ни позволява достъп до данните от контекста, където сме позиционирани, обикновено се използва, когато работим със съдържание, което е променливо, и имаме нужда от достъп до свойствата на изгледа на модела.
$ индексТой е достъпен само когато работим с контури за всеки и ни позволява достъп до различните позиции на нашия елемент.
Когато трябва да повторим няколко елемента, това е моментът, в който трябва да използваме цикъла за всеки, това ще премине през масив или списък с елементи и по този начин можем да изградим нашия списък в документа HTML.
В следния пример ще имаме свойство, наречено книги, в нашия изглед на модел и след това ще го прекосим с за всеки използване на една от контекстните променливи, в този случай $ данни, да видим:

 Свързване на данни за всеки

Ако видим резултата от браузъра, ще забележим операцията, която се случва, като се вземат предвид всички концепции, които сме учили по време на урока.

С това приключваме този урок, научихме и имахме по-задълбочен контакт с Knockout.js, важно е да се разберат по много дълбок и солиден начин концепциите за това какво е обвързване на данни, вече е начинът, по който ще използваме данните, атрибутите и свойствата на изгледа на нашия модел. Също така успяхме да разберем една много важна концепция като контекст, сега можем да разберем как различните елементи се различават и защо Knockout.js той знае кога да получи някои данни над други и това е така, защото винаги познава контекста на нашите елементи.