KnockoutJS - deklaratywne powiązania

Deklaratywne wiązanie w KnockoutJS zapewnia potężny sposób łączenia danych z interfejsem użytkownika.

Ważne jest, aby zrozumieć związek między powiązaniami a obserwowalnymi. Technicznie rzecz biorąc, te dwa są różne. Możesz użyć normalnego obiektu JavaScript, ponieważ ViewModel i KnockoutJS mogą poprawnie przetwarzać powiązanie widoku.

Bez Observable właściwość z interfejsu użytkownika zostanie przetworzona tylko po raz pierwszy. W takim przypadku nie może aktualizować się automatycznie na podstawie podstawowej aktualizacji danych. Aby to osiągnąć, powiązania muszą odnosić się do obserwowalnych właściwości.

Składnia powiązań

Oprawa składa się z 2 elementów, oprawy name i value. Oto prosty przykład -

Today is : <span data-bind = "text: whatDay"></span>

Tutaj tekst jest nazwą powiązania, a whatDay jest wartością powiązania. Możesz mieć wiele powiązań oddzielonych przecinkami, jak pokazano w poniższej składni.

Your name: <input data-bind = "value: yourName, valueUpdate: 'afterkeydown'" />

Tutaj wartość jest aktualizowana po każdym naciśnięciu klawisza.

Wiążące wartości

Wartość powiązania może mieć postać single value, literal, a variable lub może być JavaScriptwyrażenie. Jeśli powiązanie odwołuje się do jakiegoś nieprawidłowego wyrażenia lub odwołania, KO wygeneruje błąd i przestanie przetwarzać powiązanie.

Poniżej znajduje się kilka przykładów powiązań.

<!-- simple text binding -->
<p>Enter employee name: <input   -bind = 'value: empName' /></p>

<!-- click binding, call a specific function -->
<button data-bind="click: sortEmpArray">Sort Array</button>

<!-- options binding -->
<select multiple = "true" size = "8" data-bind = "options: empArray , 
   selectedOptions: chosenItem"> </select>

Zwróć uwagę na następujące punkty -

Spacje nie mają znaczenia.
Począwszy od KO 3.0, możesz pominąć wartość wiązania, która da wiązaniu niezdefiniowaną wartość.

Wiążący kontekst

Do danych, które są używane w bieżących powiązaniach, może się odwoływać obiekt. Ten obiekt nazywa siębinding context.

Hierarchia kontekstów jest tworzona i zarządzana automatycznie przez KnockoutJS. Poniższa tabela zawiera listę różnych typów kontekstów powiązań dostarczonych przez KO.

Sr.No.	Wiążące typy kontekstu i opis
1	$root To zawsze odnosi się do ViewModel najwyższego poziomu. Umożliwia to dostęp do metod najwyższego poziomu do manipulowania ViewModel. Zwykle jest to obiekt, który jest przekazywany do ko.applyBindings.
2	$data Ta nieruchomość jest bardzo podobna thissłowo kluczowe w obiekcie Javascript. Właściwość $ data w kontekście powiązania odwołuje się do obiektu ViewModel dla bieżącego kontekstu.
3	$index Ta właściwość zawiera indeks bieżącego elementu tablicy wewnątrz pętli foreach. Wartość indeksu $ zmieni się automatycznie, gdy i po zaktualizowaniu podstawowej tablicy Observable. Oczywiście ten kontekst jest dostępny tylko dlaforeach wiązania.
4	$parent Ta właściwość odnosi się do nadrzędnego obiektu ViewModel. Jest to przydatne, gdy chcesz uzyskać dostęp do zewnętrznych właściwości ViewModel z wnętrza zagnieżdżonej pętli.
5	$parentContext Wywoływany jest obiekt kontekstu, który jest powiązany na poziomie nadrzędnym $parentContext. To różni się od$parent. $ rodzic odnosi się do danych. Natomiast $ parentContext odnosi się do kontekstu wiązania. Np. Może zajść potrzeba uzyskania dostępu do indeksu zewnętrznego dla każdego elementu z wewnętrznego kontekstu.
6	$rawdata Ten kontekst zawiera surową wartość ViewModel w bieżącej sytuacji. To przypomina $ data, ale różnica polega na tym, że jeśli ViewModel jest opakowany w Observable, to $ data zostaje po prostu rozpakowany. ViewModel i $ rawdata stają się rzeczywistymi obserwowalnymi danymi.
7	$component Ten kontekst służy do odwoływania się do ViewModel tego składnika, gdy znajdujesz się wewnątrz określonego składnika. Np. Możesz chcieć uzyskać dostęp do niektórych właściwości z ViewModel zamiast do bieżących danych w sekcji szablonu komponentu.
8	$componentTemplateNodes Reprezentuje tablicę węzłów DOM przekazanych do tego konkretnego komponentu, gdy znajdujesz się w określonym szablonie komponentów.

Poniższe terminy są również dostępne w wiążącym kontekście, ale w rzeczywistości nie są wiążące.

$context - To nic innego jak istniejący obiekt kontekstu powiązania.
$element - Ten obiekt odnosi się do elementu w DOM w bieżącym powiązaniu.

Praca z tekstem i wyglądami

Poniżej znajduje się lista typów oprawy dostarczonych przez KO do obsługi tekstu i wyglądu.

Sr.No.	Typ i użycie wiązania
1	widoczne: Aby pokazać lub ukryć element HTML DOM w zależności od określonych warunków.
2	text: Aby ustawić zawartość elementu HTML DOM.
3	html: Aby ustawić zawartość znaczników HTML elementu DOM.
4	css: Aby zastosować klasy CSS do elementu.
5	style: Definiowanie atrybutu stylu wbudowanego elementu.
6	attr: Dynamiczne dodawanie atrybutów do elementu.

Praca z powiązaniami przepływu sterowania

Poniżej znajduje się lista typów powiązań przepływu sterowania dostarczonych przez KO.

Sr.No.	Typ i użycie wiązania
1	foreach: W tym powiązaniu do każdego elementu tablicy odwołuje się w pętli znacznik HTML.
2	if: Jeśli warunek jest spełniony, to dany znacznik HTML zostanie przetworzony. W przeciwnym razie zostanie usunięty z DOM.
3	ifnot: Negacja If. Jeśli warunek jest spełniony, to dany znacznik HTML zostanie przetworzony. W przeciwnym razie zostanie usunięty z DOM.
4	z: To powiązanie służy do wiązania elementów podrzędnych obiektu w kontekście określonego obiektu.
5	komponent: LUB komponent: To powiązanie służy do wstawiania komponentu do elementów DOM i opcjonalnego przekazywania parametrów.

Praca z powiązaniami pól formularza

Poniżej znajduje się lista typów powiązań pól formularza dostarczona przez KO.

Sr.No.	Typ i użycie wiązania
1	kliknij: To powiązanie służy do wywoływania funkcji JavaScript skojarzonej z elementem DOM na podstawie kliknięcia.
2	zdarzenie: To powiązanie służy do nasłuchiwania określonych zdarzeń DOM i wywoływania powiązanych z nimi funkcji obsługi na ich podstawie.
3	przesłać: To powiązanie służy do wywoływania funkcji JavaScript po przesłaniu skojarzonego elementu DOM.
4	enable: To powiązanie służy do włączania niektórych elementów DOM na podstawie określonego warunku.
5	disable: To powiązanie wyłącza powiązany element DOM, gdy wartość parametru ma wartość true.
6	wartość: To powiązanie służy do łączenia wartości odpowiedniego elementu DOM z właściwością ViewModel.
7	textInput: To powiązanie służy do tworzenia dwukierunkowego wiązania między polem tekstowym lub obszarem tekstowym a właściwością ViewModel.
8	hasFocus: To powiązanie służy do ręcznego ustawiania fokusu elementu HTML DOM za pomocą właściwości ViewModel.
9	zaznaczone: To powiązanie służy do tworzenia łącza między kontrolowanym elementem formularza a właściwością ViewModel.
10	opcje: To powiązanie służy do definiowania opcji dla wybranego elementu.
11	selectedOptions: To powiązanie służy do pracy z elementami, które są aktualnie wybrane w kontrolce formularza wyboru wielu list.
12	uniqueName: To powiązanie służy do generowania unikalnej nazwy dla elementu DOM.