Съдържание
Свързване на данни това не е нищо повече от обединението на динамични данни или текст или HTML в различните части на дървото СЛЪНЦЕ на нашия документ, в който Knockout.js работи, това ни позволява да генерираме динамично съдържание от изгледи и модели.Тази концепция може да се намери в голям брой рамки за развитие за JavaScript тъй като това е много ефективен начин за изразяване на логиката за развитие, затова е жизненоважно да разберем как работи и как може да улесни живота ни, когато правим нашите приложения.
ИзискванияОсновното изискване е да можете да изпълнявате Knockout.js дали сме го изтеглили или включили от a CDN. Ще ни трябва и сървър за стил Apache за обслужване на нашата страница и текстов редактор като Възвишен текст или NotePad ++, за да създадете документите, които нашите приложения ще носят.
Най -добрият начин да видите Свързване на данни е с пример, нека видим в следния код как сме създали документ HTML където включваме Knockout.js, тогава в нашето тяло сме създали етикет H1 в него правим а обвързване на данни на HTML, това означава, че чака HTML код.
В частта JavaScript просто това, което направихме, беше да създадем a изглед-модел и в него дефинирайте някои атрибути, за да можете да работите с него. Интересното е, че това ни позволява да предаваме данните от нашите изглед-модел към част от HTML. Нека да видим как изглежда нашият код:
Свързване на данни в knockout.jsПри извикване на нашия документ от нашия браузър получаваме следния резултат:
Но не само това, което ни позволява, е да отпечатаме текст на потребителя, ние също можем да включим CSS, класове и атрибути в нашите етикети HTML, което ни позволява да контролираме почти всеки аспект на нашата страница, без да е необходимо да задаваме статични стойности.
Нека да видим в следния пример как даваме специален клас на етикет HTML, идеята е, че можем да генерираме динамични стилове, без да е необходимо да се намесваме, когато имаме приложение, което търси шрифт ПОЧИВКА, но в този случай за опростяване ще заредим динамично само един компонент:
Свързване на данни в knockout.jsСлед това забелязваме как можем да предадем компонент стил което ще определи външния вид на текста, бихме могли да добавим и клас и накрая наричаме нашия текст от модела, също така забелязваме, че правим всичко това в едно и също обвързване на данни, само разделяйки различните елементи със запетаи.
Ако стартираме нашия нов пример, резултатът в нашия браузър е следният:
Увеличете
Има и други функции, които можем да използваме с обвързване на данни, едно от тях са условните условия, тоест можем да поставим един или друг елемент в нашите етикети HTML като се вземат предвид различните свойства на нашия модел. Нека да видим следния код, където използваме пример за този стил:
Условно свързване на данниВ нашия изглед на модел дефинирахме атрибут, наречен id, който го зададохме на 0, след това в нашия HTML в раздела на свързване на данни Дефинирали сме терен оператор, където определяме дали идентификаторът на изгледа на модела е 0, той отпечатва „Здравей“, в противен случай отпечатва „Сбогом“.
Нека стартираме примера в браузъра, за да видим резултата му:
Нещо много важно, което трябва да вземем предвид, е контекстът на нашите елементи, това е така Knockout.js използва йерархична структура на Баща син за обработка на различните свойства, които получаваме от изгледите на модела.
Това означава, че винаги работим въз основа на родител и по този начин можем да получим достъп до неговите свойства, като по този начин генерираме свойства на детето, които се различават от другите деца, които са на същото ниво, като по този начин можем да включим различни ценности.
Тъй като всичко е свързано с контекста, виждаме, че бихме могли да използваме в предишните примери текст за свързване на данни без да е необходимо да посочвате на кого принадлежи, тъй като когато това се случи, Knockout.js той веднага приема контекста на настоящото дете. Нека да видим по -долу различните видове контекст, които можем да обработваме в нашето приложение:
$ rootТова е основният контекст, откъдето произтича моделният ни изглед, когато бъде извикан от която и да е част от нашето приложение, той винаги ще търси най-йерархичната и връзката с най-висок приоритет в нашата структура, той е специален, когато имаме много деца и искаме нещо от по -големия родител.
$ родителРаботи подобно на $ root, с тази разлика, че се отнася само за непосредствения родител на нашия елемент, така че обхватът му е ограничен до това, той се използва широко, когато работим с цикли за всеки за раждане на много деца.
$ родителиДобавянето на множествено число към този контекст ни казва, че изграждаме един вид подредба или масив, който съдържа индекс за всеки от родителите на детето, откъдето го наричаме, като този $ roditelji [0] е непосредственият баща, $ roditelji [1] е родител на непосредствения родител и т.н.
$ данниТя ни позволява достъп до данните от контекста, където сме позиционирани, обикновено се използва, когато работим със съдържание, което е променливо, и имаме нужда от достъп до свойствата на изгледа на модела.
$ индексТой е достъпен само когато работим с контури за всеки и ни позволява достъп до различните позиции на нашия елемент.
Когато трябва да повторим няколко елемента, това е моментът, в който трябва да използваме цикъла за всеки, това ще премине през масив или списък с елементи и по този начин можем да изградим нашия списък в документа HTML.
В следния пример ще имаме свойство, наречено книги, в нашия изглед на модел и след това ще го прекосим с за всеки използване на една от контекстните променливи, в този случай $ данни, да видим:
Свързване на данни за всеки
