Zaawansowane wiązania w Knockout.js

Pisanie skomplikowanych aplikacji wiąże się ze wzrostem złożoności kodu, choć to zwykle bywa nie jest aksjomatem ani ustaloną regułą, w rzeczywistości najlepiej by było, gdyby nasza aplikacja była złożona z powodu unii wielu małych aplikacji, ponieważ jedna Prosta mała aplikacja sprawiłaby, że życie programisty byłoby mniej skomplikowane.

W przypadku Knockout.js coś podobnego dzieje się z wiązania, gdzie istnieją zachowania, które możemy osiągnąć za pomocą wiązania Jednak ostatecznie generowałoby to dużą złożoność, ponieważ ogranicza to nieco elastyczność, przy czym nie mówimy, że wiązania podstawy są złe, po prostu są chwile, kiedy nie będą działać prawidłowo dla nas.

Zaawansowane wiązaniaDlatego musimy używać zaawansowane wiązania, tutaj możemy zbudować własne wiązania z zachowaniami, które definiujemy bezpośrednio, oszczędzając nam pewien stopień złożoności w kodzie i zyskując czytelność, jedyną wadą wywołania tego jest to, że zbudowalibyśmy te zachowania prawie od zera, czyniąc ponowne użycie kodu null.

Wykonaj oprawę dwóch lub więcej ViewModels
Są chwile, kiedy nasz Zobacz modele powinien pozostać tak prosty, jak to tylko możliwe, a może musimy użyć a ZobaczModel który jest udostępniany na każdej stronie naszej aplikacji, w każdym razie wymóg możliwości korzystania z kilku Zobacz modele jednocześnie pozostaje.

Jak to działa?Zanim zaczniesz martwić się tym problemem, warto wiedzieć, że nie jest to coś szalonego ani niemożliwego do zrobienia, w rzeczywistości bardzo powszechną praktyką jest zachowanie prostoty i czytelności naszego kodu w aplikacji. Aby tak się stało, musimy przekazać metodzie tylko drugi parametr ko.applyBindings które pomogą nam osiągnąć ten cel poprzez ograniczenie wiążący do HTML który go zawiera, w ten sposób możemy zastosować wszystkie ZobaczModel czego potrzebujemy bez żadnych niedogodności

Zobaczmy mały przykład, w którym to umożliwimy, przede wszystkim zbudujemy a HTML gdzie będziemy mieli dwa elementy każdy z imieniem ZobaczModel inny, da nam to podstawę do tego, co chcemy osiągnąć, a w każdym wejściu umieścimy po prostu wiązanie danych typu tekstu.

Już w części JavaScript zdefiniujemy nasze ZobaczModel ogólne gdzie zwrócimy atrybut o nazwie Nazwa a w momencie tworzenia ich instancji zamierzamy stworzyć a zobaczModel1 i zobaczModel2 które będą instancjami ZobaczModel ogólnie, że tworzymy używając różnych nazw, w końcu stosując ko.applyBinding powiemy który blok HTML każdy musi przynależeć i tym samym osiągniemy cel tego przykładu.

Zobaczmy zatem w poniższym kodzie, jak wyrażamy wszystko, co wyjaśniliśmy wcześniej:

 Zaawansowane wiązanie danych

Zobaczmy na poniższym obrazku, jak wygląda nasz przykład, gdy uruchomimy go w przeglądarce:

POWIĘKSZAĆ

Widzimy na obrazie, że nasza dwójka Zobacz modele skutecznie są one stosowane w naszym kodzie HTML, każdy zawarty w elemencie, który przekazujemy jako drugi parametr do metody ko.applyWiązania () dając nam w ten sposób wyobrażenie o tym, jak możemy go pełniej zastosować w naszych aplikacjach.

Wiązania i TinyMCE
Na potrzeby tego przykładu zbudujemy funkcjonalność dostosowaną do rzeczywistego świata, zbudujemy wiążący zaawansowane, aby pomóc nam włączyć edytor MałyMCE w naszym HTML, to, co robi ten edytor, to budowanie interfejsu WYSIWYG, czyli edytor tekstu sformatowanego. Główną trudnością tego wdrożenia jest to, że musimy tworzyć własne wiążący, co może przyprawić nas o ból głowy, jeśli nie mamy odpowiedniego przewodnika, który będziemy mieć teraz.

WymaganiaAby wykonać ten przykład, musimy pobrać kilka zewnętrznych zasobów, w tym przypadku jQuery w najnowszej wersji, oprócz pobrania MałyMCE i włączyć go do naszego projektu, aby uzyskać zasoby, wystarczy wykonać szybkie wyszukiwanie w Google więc nie będziemy się długo rozwodzić nad tym punktem. Inną rzeczą, której będziemy potrzebować, jest utworzenie nowego pliku o nazwie kobinding.js gdzie napiszemy niezbędny kod, aby nasze rozwiązanie mogło działać poprawnie. Po pobraniu wszystkich naszych zasobów i ścieżce, do której możemy uzyskać dostęp z naszej aplikacji, możemy napisać nasz kod.

To, co zrobi aplikacja, to zapowiedź tego, co piszemy, w tym celu stworzymy formularz, w którym umieścimy nasze pole tekstowe, które będzie miało co MałyMCE, przycisk resetowania, aby przywrócić wszystko do stanu początkowego i wreszcie gdzie otrzymamy tekst, który piszemy.

Na koniec uwzględnimy wszystkie nasze zasoby, w tym nowy plik kobinding.js i budujemy niezbędny kod dla naszego ZobaczModel z zauważalny który pozwala nam wykryć zmiany w naszym polu tekstowym, zobaczmy jak wygląda nasz kod:

 Zaawansowane wiązanie danych TinyMCE Resetuj zawartość
Zapowiedź

Jeśli spojrzymy na kod i postępowaliśmy zgodnie z poprzednimi samouczkami, zauważymy, że nic nie może budzić wątpliwości, jednak jeśli uruchomimy to w naszej przeglądarce, nie zadziała to tak, jak wyjaśniliśmy, a to dlatego, że potrzebuję wiążący niestandardowe w naszym nowym pliku.

To, co robi ten nowy kod, jest powiązaniem między zachowaniem MałyMCE i nasz ZobaczModel, w tym celu stworzymy dwie funkcje lub metody zwane w tym Tak aktualizacja, dla metody w tym jak sama nazwa wskazuje, kiedy inicjujemy nasz komponent, tutaj ustawiamy wiążący obszaru tekstowego z MałyMCE abyśmy mogli zastosować obserwowalny, dodatkowo zdefiniujemy zdarzenie reszta czyli wtedy, gdy zmienia się stan i zawartość naszego pola tekstowego, dzięki czemu możemy aktualizować zawartość w czasie rzeczywistym.

Inną metodą lub funkcją jest aktualizacja, jest to aktywowane za każdym razem, gdy nastąpią zmiany w połączonym elemencie, na przykład przycisk przywracania treści, co powoduje, że jest on bezpośrednio połączony z tym, co zapewnia nam wcześniej utworzony obserwowalny. Zobaczmy więc ostateczny kod dla naszego kobinding.js:

 ko.bindingHandlers.tinymce = {init: function (element, valueAccessor, allBindingsAccessor) {var tinymceOptions = {setup: function (editor) {editor.on ('change', function (event) {valueAccessor() (event.target. Pobierz zawartość ());}); }}; $ (element) .text (valueAccessor()()); setTimeout (funkcja () {$ (element) .tinymce (tinymceOptions);}, 0); ko.utils ['domNodeDisposal']. addDisposeCallback (element, funkcja () {$ (element) .tinymce (). usuń ();}); }, 'update': function (element, valueAccessor, allBindings) {var tinymce = $ (element) .tinymce (), value = valueAccessor () (); if (tinymce) {if (tinymce.getContent ()! == wartość) {tinymce.setContent (wartość); }}}};

Jeśli ponownie uruchomimy w naszej przeglądarce, zobaczymy, że wszystko działa tak, jak powinno, w momencie pisania i jeśli zmienimy fokus, zobaczymy, że w naszym obszarze podglądu mamy zawartość tak, jak powinna wyglądać:

POWIĘKSZAĆ

Dzięki temu udało nam się stworzyć zaawansowane wiązanie i spersonalizowany, który pomaga nam zrozumieć wszystko, co możemy osiągnąć przy odrobinie pomysłowości i wszystkich narzędzi, jakie nam daje Nokaut. Przypadki takie jak ten z MałyMCE Są one bardzo powszechne, ponieważ tego typu wtyczki są bardzo popularne w tworzeniu aplikacji internetowych, więc być może będziemy musieli zastosować podobne rozwiązanie w pewnym momencie rozwoju naszego projektu.

Na tym zakończyliśmy ten samouczek, ponieważ widzimy, że nie jest konieczne ograniczanie się do funkcji i wcześniej ustalonych metod w NokautOczywiście istnieją funkcje, które są nadal bardzo zaawansowane dla tego poziomu wiedzy, ale dzięki praktyce i badaniom można je osiągnąć. Ciekawe jest to, że wszystko to można osiągnąć przy odrobinie lektury oficjalnej dokumentacji Nokaut a także szukanie na przykład przypadków, które pomagają nam zilustrować i umieścić się w kontekście.