Tym wpisem rozpoczynam pierwszy kurs z serii samouczków. Na pierwszy ogień wejdzie KnockoutJS. Co to jest? po co to jest? z czym się to je? na te i inne pytania postaram się odpowiedzieć w serii tutorials knockoutjs, zapraszam 🙂
Wprowadzenie
Załóżmy, że mamy taką sytuację: użytkownik ma koszyk w portalu do którego może dodawać produkty. Kiedy klient postanowi usunąć wybraną rzecz z koszyka, musimy w takiej sytuacji usunąć dane z jakiegoś źródła danych (na potrzeby przykładu załóżmy, że jest to zwykła baza sql) oraz usunięcie elementu który jest powiązany z koszykiem w htmlu, po wszystkim należy jeszcze z aktualizować łączną cena w koszyku. Niby prosta czynność jedno kliknięcie „usuń z koszyka” a ile operacji trzeba wykonać i jeszcze te nieszczęsne updaty na bazie.
Knockout.js jest to biblioteka napisana w JavaScript która pozwala zarządzać w ekonomiczny sposób takimi przypadkami jak m.in koszyk. Zamiast „ręcznie” śledzić która sekcja HTML’a odpowiada za źródło danych, Knockout.js pozwala nam utworzyć bezpośrednie połączenie pomiędzy źródłem danych a ich bezpośrednią prezentacją. Już rozjaśniam o co chodzi.
Po kliknięciu w element HTML’owy który jest powiązany z obiektem danych, jakiekolwiek zmiany na tym obiekcie są automatycznie odzwierciedlane na DOM. Takie rozwiązanie pozwala nam na elastyczne, szybkie i sprawne zarządzanie stroną. Reasumując gdy postawimy widok HTML, wtedy pracujemy na JavaScript’owych obiektach z danymi. Używając Knockout.js, wszystko co musimy zrobić aby usunąć element z koszyka to usunięcie tego elementu z JavaScrip’towej tablicy która reprezentuje koszyk użytkownika. Odpowiednie elementy HTML’a automatycznie usuną element z koszyka i z aktualizują cenę.
Można powiedzieć, że Knockout.js pozwala na wyświetlanie w sposób płynny(bez przeładowania strony) obiektów JavaScript. Jak to działa w praktyce? kiedy przechodzimy na front-end, Knockout.js łączy się ze źródłem danych i HTML’owymi elementami po przez dodanie pojedynczych atrybutów do HTML’a, CSS’a i w innych js’owych bibliotekach.
Czym Knockout.js NIE jest
Knockout.js nie jest zamiennikiem dla jQuery, Prototype czy innych. Nie posiada animacji, generycznych eventów, czy też funkcji AJAX (ale potrafi parsować dane z AJAX’a). Knockout.js jest skoncentrowany tylko i wyłącznie na płynnym aktualizowaniu danych na stronie, w jaki sposób dane uzyskamy to już jest zależne tylko od nas.
Pozdro 🙂