Spisie treści
Wiązanie danych to nic innego jak połączenie dynamicznych danych z tekstem lub kodem HTML w różnych częściach drzewa SŁOŃCE naszego dokumentu, w którym działa Knockout.js, pozwala nam to generować dynamiczną zawartość z widoków i modeli.Koncepcję tę można znaleźć w wielu frameworkach programistycznych dla JavaScript ponieważ jest to bardzo skuteczny sposób wyrażania logiki rozwoju, dlatego niezwykle ważne jest, abyśmy zrozumieli, jak to działa i jak może ułatwić nam życie podczas tworzenia naszych aplikacji.
WymaganiaGłównym wymaganiem jest możliwość wykonania Knockout.js niezależnie od tego, czy pobraliśmy go, czy dołączyliśmy go z CDN. Będziemy też potrzebować serwera stylów Apache do obsługi naszej strony i edytora tekstu, takiego jak Wzniosły tekst lub NotePad++ do tworzenia dokumentów, które będą nosić nasze aplikacje.
Najlepszy sposób, aby zobaczyć Wiązanie danych jest na przykładzie, zobaczmy w poniższym kodzie, jak stworzyliśmy dokument HTML gdzie uwzględniamy Knockout.js, to w naszym ciele stworzyliśmy etykietę H1 w nim robimy wiązanie danych z HTML, oznacza to, że czeka na kod HTML.
W części JavaScript po prostu to, co zrobiliśmy, to stworzenie zobacz model i zdefiniuj w nim pewne atrybuty, aby móc z nim pracować. Ciekawe jest to, że pozwala nam to na przekazywanie danych z naszego zobacz model do części kodu HTML. Zobaczmy, jak wygląda nasz kod:
Wiązanie danych w knockout.jsWywołując nasz dokument z naszej przeglądarki otrzymujemy następujący wynik:
Ale nie tylko to, co pozwala nam na drukowanie tekstu użytkownikowi, możemy również włączyć CSS, klasy i atrybuty do naszych etykiet HTML, co pozwala nam kontrolować prawie każdy aspekt naszej strony bez konieczności ustawiania wartości statycznych.
Zobaczmy w poniższym przykładzie, jak nadajemy etykiecie specjalną klasę HTMLchodzi o to, że możemy generować dynamiczne style bez konieczności ingerencji, gdy mamy aplikację wyszukującą czcionkę ODPOCZYNEK, jednak w tym przypadku dla uproszczenia będziemy ładować dynamicznie tylko jeden komponent:
Wiązanie danych w knockout.jsZauważamy wtedy, jak możemy przekazać komponent styl co określi wygląd tekstu, moglibyśmy też dodać klasę i na koniec wołamy nasz tekst z modelu, zauważamy też, że robimy to wszystko w ten sam wiązanie danych, tylko oddzielając poszczególne elementy przecinkami.
Jeśli uruchomimy nasz nowy przykład, wynik w naszej przeglądarce będzie następujący:
POWIĘKSZAĆ
Istnieją inne funkcje, z których możemy korzystać wiązanie danych, jednym z nich są warunki warunkowe, to znaczy możemy umieścić ten lub inny element w naszych etykietach HTML biorąc pod uwagę różne właściwości naszego modelu. Zobaczmy następujący kod, w którym używamy przykładu tego stylu:
Warunkowe wiązanie danychW naszym widoku modelu zdefiniowaliśmy atrybut o nazwie id, który ustawiamy na 0, a następnie w naszym HTML w sekcji powiązanie danych Zdefiniowaliśmy operator trójargumentowy, w którym określamy, czy id widoku modelu wynosi 0 to wypisuje 'Hello' w przeciwnym razie wypisuje 'Goodbye'.
Uruchommy przykład w przeglądarce, aby zobaczyć jego wynik:
Coś bardzo ważnego, co musimy wziąć pod uwagę, to kontekst naszych elementów, ponieważ Knockout.js używa hierarchicznej struktury Ojciec syn do obsługi różnych właściwości, które otrzymujemy z widoków modelu.
Oznacza to, że zawsze pracujemy w oparciu o rodzica, a zatem możemy uzyskać dostęp do jego właściwości, generując w ten sposób właściwości dziecka, które różnią się od innych dzieci na tym samym poziomie, dzięki czemu możemy włączyć różne wartości.
Ponieważ wszystko jest powiązane z kontekstem, widzimy, że moglibyśmy użyć w poprzednich przykładach tekst powiązania danych bez konieczności wskazywania do kogo należy, od kiedy to nastąpi, Knockout.js natychmiast zakłada kontekst bieżącego dziecka. Zobaczmy poniżej różne rodzaje kontekstów, które możemy obsługiwać w naszej aplikacji:
$ rootJest to główny kontekst, z którego pochodzi nasz widok modelu, przywołany z dowolnej części naszej aplikacji zawsze będzie szukał najbardziej hierarchicznej i najwyższej hierarchii relacji w naszej strukturze, jest wyjątkowy, gdy mamy wiele dzieci i chcemy czegoś od starszego rodzica.
$ rodzicDziała podobnie do $ root, z tą różnicą, że odnosi się tylko do bezpośredniego rodzica naszego elementu, więc jego zakres ogranicza się do tego, jest szeroko stosowany podczas pracy z cyklami dla każdego aby urodzić wiele dzieci.
$ rodziceDodanie liczby mnogiej do tego kontekstu mówi nam, że budujemy rodzaj układu lub tablicy, która zawiera indeks dla każdego z rodziców dziecka, od którego je nazywamy, w ten sposób $ rodzice [0] jest bezpośrednim ojcem, $ rodzice [1] jest rodzicem bezpośredniego rodzica i tak dalej.
$ danychPozwala nam na dostęp do danych kontekstu, w którym jesteśmy pozycjonowani, jest zwykle używany, gdy pracujemy z zawartością, która jest zmiennymi i potrzebujemy uzyskać dostęp do naszych właściwości widoku modelu.
$ indeksJest dostępny tylko wtedy, gdy pracujemy z pętlami dla każdego i pozwala nam uzyskać dostęp do różnych pozycji naszego żywiołu.
Kiedy musimy iterować po kilku elementach, jest to moment, w którym musimy użyć pętli dla każdego, przejdzie przez tablicę lub listę elementów i w ten sposób możemy zbudować naszą listę w dokumencie HTML.
W poniższym przykładzie będziemy mieli w naszym widoku modelu właściwość o nazwie książki, a następnie prześledzimy ją za pomocą dla każdego wykorzystanie jednej ze zmiennych kontekstowych, w tym przypadku $ danych, Zobaczmy:
Wiązanie danych foreach
