Разширени връзки в Knockout.js

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

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

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

Направете свързване на два или повече ViewModels
Има моменти, когато нашите ViewModels трябва да останат възможно най -прости или може би трябва да използваме a ViewModel което се споделя на всяка страница от нашето приложение, във всеки случай изискването да можете да използвате няколко ViewModels в същото време остава.

Как работи?Преди да се притеснявате за този проблем, е добре да знаете, че това не е нещо лудо и не е невъзможно да се направи, всъщност е много обичайна практика да се запази простотата и четливостта на нашия код в приложението. За да се случи това, трябва само да предадем втори параметър на метода ko.applyBindings което ще ни помогне да постигнем тази цел, като ограничим обвързващ към HTML която го съдържа, по този начин можем да приложим всички ViewModel от които се нуждаем без никакви неудобства

Нека видим малък пример, където ще направим това възможно, на първо място ще изградим a HTML където ще имаме два елемента всеки с име на ViewModel различно, това ще ни даде основата за това, което искаме да постигнем и във всеки вход ние просто ще поставим а обвързване на данни от тип текст.

Вече в частта на JavaScript ние ще определим нашите ViewModel общо, където ще върнем атрибут, наречен Име и по време на създаването на техния екземпляр ще създадем a viewModel1 и а viewModel2 които ще бъдат екземпляри на ViewModel общо, което създаваме, използвайки различни имена, накрая чрез прилагане на ko.applyBinding ще кажем кой блок HTML всеки трябва да принадлежи и по този начин ще постигнем целта на този пример.

Нека да видим тогава в следния код как изразяваме всичко, което обяснихме по -рано:

 Разширено свързване на данни

Нека видим на следното изображение как изглежда нашият пример, когато го стартираме в браузъра:

Увеличете

Виждаме в изображението, че нашите двама ViewModels ефективно те се прилагат в нашия HTML всеки, съдържащ се в елемента, който предаваме като втори параметър на метода ko.applyBindings () като по този начин ни дава представа как можем да го приложим по -пълно в нашите приложения.

Подвързвания и TinyMCE
За този пример ще изградим функционалност, адаптирана към реалния свят, ще изградим a обвързващ напреднал, за да ни помогне да включим редактора TinyMCE в нашата HTML, това, което прави този редактор, е да изгради интерфейс WYSIWYG, тоест богат текстов редактор. Основната трудност на това изпълнение е, че трябва да създадем свои собствени обвързващ, което може да ни причини главоболие, ако нямаме адекватно ръководство, което ще имаме сега.

ИзискванияЗа да изпълним този пример, в този случай трябва да изтеглим няколко външни ресурса jQuery в последната му версия, в допълнение към изтеглянето на TinyMCE и да го включим в нашия проект, за да получим ресурсите, просто трябва да извършим бързо търсене Google така че няма да се спираме дълго на този въпрос. Другото нещо, от което се нуждаем, е да създадем нов файл, наречен kobinding.js където ще напишем необходимия код, за да може нашето решение да работи правилно. След като всичките ни ресурси са изтеглени и в път, до който можем да получим достъп от нашето приложение, можем да напишем нашия код.

Това, което приложението ще направи, е да ни даде предварителен преглед от това, което пишем, за това ще създадем форма, където ще поставим нашето текстово поле, което ще има в TinyMCE, бутон за нулиране, за да върнете всичко в първоначалното състояние и накрая a където ще получим текста, който пишем.

Накрая ще включим всички наши ресурси, включително новия файл kobinding.js и изграждаме необходимия код за нашия ViewModel с наблюдаем което ни позволява да открием промените в текстовото ни поле, нека да видим как изглежда нашият код:

 Разширено свързване на данни TinyMCE Нулирайте съдържанието
Визуализация

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

Това, което прави този нов код, е връзка между поведението на TinyMCE и нашата ViewModel, за това ще създадем две функции или методи, наречени в него Y актуализация, за метода в него както подсказва името му, когато инициализираме нашия компонент, тук задаваме обвързващ на текстовата област с TinyMCE за да можем да приложим наблюдаваното, допълнително ще дефинираме събитието промяна когато състоянието и съдържанието на текстовото ни поле се променят, за да можем да актуализираме съдържанието в реално време.

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

 ko.bindingHandlers.tinymce = {init: function (element, valueAccessor, allBindingsAccessor) {var tinymceOptions = {setup: function (editor) {editor.on ('change', function (event) {valueAccessor () (event.target. getContent ());}); }}; $ (елемент) .text (valueAccessor () ()); setTimeout (function () {$ (element) .tinymce (tinymceOptions);}, 0); ko.utils ['domNodeDisposition']. addDisposeCallback (елемент, функция () {$ (елемент) .tinymce (). remove ();}); }, 'update': function (element, valueAccessor, allBindings) {var tinymce = $ (елемент) .tinymce (), value = valueAccessor () (); if (tinymce) {if (tinymce.getContent ()! == стойност) {tinymce.setContent (стойност); }}}};

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

Увеличете

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

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