Praca z formularzami w Knockout.js

Formularze są integralną częścią każdej aplikacji lub strony internetowej, ponieważ jest to jeden ze środków pozwalających nam na natywne pozyskiwanie danych użytkowników, przez co ich przetwarzanie jest bardzo częstym zadaniem.
Knockout.js pozwala nam pracować z Twoim obiektem wiązanie danych wszystkie elementy, które mogą składać się na formularz, dając tym samym możliwość walidacji, wyzwalania zdarzeń, przypisywania obserwowalnych itp. Dzięki temu przetwarzanie formularzy po stronie klienta jest wykonalne, dlatego dodajemy dodatkową warstwę walidacji, zanim dotrze ona do serwera.
WymaganiaBędziemy musieli tylko mieć Knockout.js w naszym systemie i dostępne dla aplikacji, które zamierzamy stworzyć, uprawnienia do zapisu plików, połączenie z Internetem w celu uzyskania bibliotek, jeśli ich nie posiadamy, oraz edytor tekstu, taki jak Wzniosły tekst lub Notatnik ++. Do uruchomienia aplikacji potrzebujemy serwera typu web Apache lub Nginx w naszym środowisku testowym.
Zanim przejdziemy do przykładów z przypadkami, które możemy zastosować, bardzo ważne jest, aby znać powiązania danych które potrafią współpracować z elementami formularza naszej aplikacji, w ten sposób możemy zacząć zdawać sobie sprawę z tego, co możemy, a czego nie możemy osiągnąć, zwłaszcza w jaki sposób możemy uzyskać wyniki, których potrzebujemy, aby nasza aplikacja działała poprawnie:
Wartość wiązania danychJest to używane w elementach wejściowych wartości lub selekcji, mogą to być elementy wejściowe, obszar tekstowy lub elementy wyboru, dzięki czemu możemy przechwycić wartość elementu w momencie, gdy musimy go użyć.
Tekst wiązania danychInputwschód wiążący jest używany z elementami input i textarea, jego funkcja jest podobna do wartość Jeśli jednak przypiszemy do niego obserwowalny, możemy przechwycić wartości, gdy użytkownik wchodzi w interakcję z elementem, w przeciwieństwie do wartości, która daje nam wartość, gdy element się zmienia, na przykład gdy traci fokus.
Sprawdzone powiązanie danychJest używany z elementami typu pole wyboru Tak przyciski radioweJak sama nazwa wskazuje, pozwala nam ustalić lub wiedzieć, czy element jest wybrany w konstrukcji wykorzystującej wymienione elementy.
Opcje wiązania danychUżywając tego wiążący Możemy wypełnić wybrany element opcjami, które wyświetli w formularzu, jest to idealne rozwiązanie, gdy chcemy dynamicznie tworzyć katalog opcji.
Wybrane powiązanie danychOpcjeRównież wyłączny dla elementu select, jest używany, gdy musimy ustawić wybrane opcje podczas ustawiania właściwości wielo, ponieważ musimy wybrać więcej niż jedną opcję na razz.
Włącz / wyłącz powiązanie danychPozwala nam włączyć lub wyłączyć dowolny z różnych elementów formularza, dzięki czemu możemy usunąć element, jeśli nie jest konieczne użycie go w przepływie aplikacji w określonych warunkach, gdzie włączyć służy do umożliwienia i wyłączyć wyłączyć, na wypadek, gdybyśmy nie znali znaczenia każdego słowa.
Najciekawsze z nich powiązania danych jest to, że działają w dwojaki sposób, to znaczy, gdy jest zmiana w elemencie możemy ją otrzymać w naszym widoku modelu i w razie potrzeby wykonać jakąś obróbkę, ale także jeśli mamy obserwowalny i chcemy coś zrobić z aplikacji do formularza możemy również bez problemu, o ile korzystamy z wiązanie danych odpowiedni dla typu elementu formularza, ponieważ Knockout.js nie zinterpretuje błędnych instrukcji, jak mogłaby to zrobić przeglądarka z kodem HTML.
Zobaczmy teraz praktyczny przykład, jak możemy wykorzystać wszystkie koncepcje, o których mówiliśmy w poprzedniej części tego samouczka, stworzymy element typu obszar tekstowy że przyjmie tylko 140 znaków, ponieważ istnieje to ograniczenie, musimy poinformować użytkownika, ile znaków pozostało podczas pisania.
Logika, której użyjemy, jest bardzo prosta, uwzględnimy data-bind textInput w elemencie textarea naszego formularza, następnie w widoku modelu ustawimy go jako obserwowalny, dzięki czemu będziemy mogli rozpocząć przechwytywanie znaków podczas pisania przez użytkownika. Wreszcie używamy elementu obliczone Aby stworzyć kompozyt obserwowalny z sumą pozostałych znaków, w tej chwili nie będziemy zmuszać użytkownika do pisania mniej, tylko informujemy go o znakach. Spójrzmy na kod naszego przykładu:

 Formularze w knockout.js
Wpisz tekst

Pozostałe znaki: 

Należy zauważyć, że nie używamy wartość powiązania danych ponieważ potrzebujemy, aby zmiana liczby pozostałych znaków wystąpiła w momencie wpisywania przez użytkownika, ponieważ w przeciwnym razie moglibyśmy wskazać tylko ilość w momencie, gdy przechodzi do innego elementu, a to nie byłoby optymalne dla tego, na co kierujemy podczas używania Knockout.jsBędą jednak przypadki, w których tego typu zachowanie jest konieczne, wszystko zależy od tego, czego potrzebuje nasza aplikacja. Zobaczmy więc, jak wygląda nasz przykład, gdy uruchamiamy go w przeglądarce:

Oczywiście nie możemy tutaj dynamicznie zobaczyć, jak nasz licznik spada, ale kiedy zapisujemy nasz licznik pozostałych znaków, jest on aktualizowany tak, jak jest to zapisane w elemencie textarea formularza:

Innym aspektem, którego często potrzebujemy w naszych aplikacjach podczas pracy z formularzami, są zdarzenia, ponieważ dzięki nim możemy wyzwalać akcje, gdy użytkownik robi coś konkretnego, na przykład kliknie lub najedzie myszą na określoną sekcję naszego HTML. Zobaczmy niektóre zdarzenia, które możemy wykorzystać w naszych formularzach:
Prześlij wydarzenieTo zdarzenie może być używane tylko w elemencie Formularz, i jest aktywowany tylko wtedy, gdy użytkownik prześle formularz do serwera, za pomocą przesłania danych wejściowych lub inną metodą.
Kliknij wydarzenieTo wydarzenie jest starym znajomym, ponieważ jego nazwa wskazuje, że jest aktywowane po kliknięciu elementu w naszej aplikacji.
Wydarzenie HasFocusTo zdarzenie jest uruchamiane, gdy element ogólnie input, textarea lub select jest wybrany przez użytkownika i jest w tym momencie aktywny.
Istnieje również możliwość skorzystania z innych wydarzeń dostępnych w SŁOŃCE na przykład najechanie kursorem myszy, naciśnięcie klawisza w celu rozszerzenia funkcjonalności naszego widoku modelu na te poziomy.
W następnym ćwiczeniu zastosujemy wiedzę o zdarzeniach, którą nabyliśmy, stworzymy mały formularz, w którym będziemy mieli listę, a za każdym razem, gdy najedziemy kursorem myszy na opcję, zostanie wyświetlony obraz wyświetlane, oczywiście będzie to implementacja pokazowa i nie nadaje się do produkcji, jednak pomaga nam zrozumieć, nad czym pracowaliśmy.
W takim przypadku dodatkowo będziemy potrzebować Knockout.js biblioteka jQuery użyć niektórych efektów w naszej aplikacji, więc idealnym rozwiązaniem jest pobranie go i zapisanie w tym samym folderze lub katalogu, w którym mamy Knockout.js, a może użyj go ze swojego CDN urzędnik. Zobaczmy więc kod, którego potrzebujemy:

 Formularze w knockout.js

Tutaj po prostu stworzyliśmy listę rzeczy z opisem i obrazem, ten obraz może być dostępny w dowolnym miejscu aplikacji, w tym przypadku wybraliśmy jego katalog główny, a następnie tworzymy funkcję, która dodaje obraz do selektor z jQuery abyśmy mogli pokazać to samo w SŁOŃCE.
W części HTML widzimy, że stworzyliśmy listę z elementami należącymi do listy rzeczy i na koniec wskazujemy, że wydarzenie jest najechanie kursorem myszy oraz funkcję do wykonania, gdy wystąpi to zdarzenie. Zobaczmy jak wygląda nasza aplikacja, gdy uruchomimy ją w naszej przeglądarce:

Następnie, jeśli przesuniemy kursor myszy na niektóre teksty, odpowiedni obraz zostanie załadowany i możemy zobaczyć funkcjonalność naszego przykładu:

Oczywiście, ponieważ jest to dynamiczna zmiana, nie możemy docenić zmiany, ale jeśli przesuniemy kursor na górny element, obraz się zmieni. Na tym zakończyliśmy ten samouczek, dzięki któremu zagłębiliśmy się w pracę z formularzami z Knockout.js, dając nam narzędzia do poprawy przechwytywania i walidacji danych pochodzących od naszych użytkowników.