KnockoutJS - Декларативные привязки

Декларативная привязка в KnockoutJS обеспечивает мощный способ подключения данных к пользовательскому интерфейсу.

Важно понимать взаимосвязь между привязками и Observables. Технически эти двое разные. Вы можете использовать обычный объект JavaScript, поскольку ViewModel и KnockoutJS могут правильно обрабатывать привязку View.

Без Observable свойство из пользовательского интерфейса будет обрабатываться только в первый раз. В этом случае он не может обновляться автоматически на основе обновления базовых данных. Для этого привязки должны быть отнесены к наблюдаемым свойствам.

Синтаксис привязки

Переплет состоит из 2-х предметов, переплет name и value. Ниже приводится простой пример -

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

Здесь текст - это имя привязки, а whatDay - значение привязки. У вас может быть несколько привязок, разделенных запятой, как показано в следующем синтаксисе.

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

Здесь значение обновляется после нажатия каждой клавиши.

Обязательные значения

Значение привязки может быть single value, literal, а variable или может быть JavaScriptвыражение. Если привязка относится к некоторому недопустимому выражению или ссылке, то KO выдаст ошибку и прекратит обработку привязки.

Ниже приведены несколько примеров привязок.

<!-- 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>

Обратите внимание на следующие моменты -

Пробелы не имеют никакого значения.
Начиная с KO 3.0, вы можете пропустить значение привязки, которое даст привязке неопределенное значение.

Контекст привязки

На данные, которые используются в текущих привязках, может ссылаться объект. Этот объект называетсяbinding context.

Иерархия контекста создается и управляется KnockoutJS автоматически. В следующей таблице перечислены различные типы контекстов привязки, предоставляемые KO.

Sr.No.	Типы и описание контекста привязки
1	$root Это всегда относится к ViewModel верхнего уровня. Это позволяет получить доступ к методам верхнего уровня для управления ViewModel. Обычно это объект, который передается в ko.applyBindings.
2	$data Это свойство очень похоже на thisключевое слово в объекте Javascript. Свойство $ data в контексте привязки относится к объекту ViewModel для текущего контекста.
3	$index Это свойство содержит индекс текущего элемента массива внутри цикла foreach. Значение $ index будет изменяться автоматически при обновлении базового массива Observable. Очевидно, что этот контекст доступен только дляforeach привязки.
4	$parent Это свойство относится к родительскому объекту ViewModel. Это полезно, когда вы хотите получить доступ к внешним свойствам ViewModel изнутри вложенного цикла.
5	$parentContext Объект контекста, связанный на родительском уровне, называется $parentContext. Это отличается от$parent. $ parent относится к данным. Принимая во внимание, что $ parentContext относится к контексту привязки. Например, вам может потребоваться доступ к индексу внешнего элемента foreach из внутреннего контекста.
6	$rawdata Этот контекст содержит необработанное значение ViewModel в текущей ситуации. Это похоже на $ data, но разница в том, что если ViewModel заключен в Observable, тогда $ data просто разворачивается. ViewModel и $ rawdata становятся фактическими наблюдаемыми данными.
7	$component Этот контекст используется для ссылки на ViewModel этого компонента, когда вы находитесь внутри определенного компонента. Например, вы можете захотеть получить доступ к некоторому свойству из ViewModel вместо текущих данных в разделе шаблона компонента.
8	$componentTemplateNodes Он представляет собой массив узлов DOM, переданных этому конкретному компоненту, когда вы находитесь в пределах определенного шаблона компонента.

Следующие термины также доступны в обязательном порядке, но не являются обязательным контекстом.

$context - Это не что иное, как существующий объект контекста привязки.
$element - Этот объект ссылается на элемент в DOM в текущей привязке.

Работа с текстом и внешним видом

Ниже приводится список типов привязки, предоставляемых KO для работы с текстом и визуальным оформлением.

Sr.No.	Тип привязки и использование
1	visible: <условие-привязки> Чтобы показать или скрыть элемент HTML DOM в зависимости от определенных условий.
2	текст: <значение-привязки> Чтобы установить содержимое элемента HTML DOM.
3	html: <значение-привязки> Чтобы установить содержимое разметки HTML для элемента DOM.
4	css: <объект-привязки> Чтобы применить классы CSS к элементу.
5	стиль: <объект-привязки> Чтобы определить встроенный атрибут стиля элемента.
6	attr: <объект-привязки> Для динамического добавления атрибутов к элементу.

Работа с привязками потока управления

Ниже приведен список типов привязки потока управления, предоставленный KO.

Sr.No.	Тип привязки и использование
1	foreach: <массив-привязок> В этой привязке каждый элемент массива упоминается в разметке HTML в цикле.
2	если: <условие-привязки> Если условие истинно, то будет обработана данная разметка HTML. В противном случае он будет удален из DOM.
3	если не: <условие-привязки> Отрицание If. Если условие истинно, то будет обработана данная разметка HTML. В противном случае он будет удален из DOM.
4	с: <объект-привязки> Эта привязка используется для привязки дочерних элементов объекта в контексте указанного объекта.
5	компонент: <имя-компонента> ИЛИ компонент: <объект-компонента> Эта привязка используется для вставки компонента в элементы DOM и необязательной передачи параметров.

Работа с привязками полей формы

Ниже приведен список типов привязки полей формы, предоставляемых KO.

Sr.No.	Тип привязки и использование
1	щелкните: <функция привязки> Эта привязка используется для вызова функции JavaScript, связанной с элементом DOM, на основе щелчка.
2	событие: Эта привязка используется для прослушивания указанных событий DOM и вызова связанных с ними функций-обработчиков на их основе.
3	отправить: <функция привязки> Эта привязка используется для вызова функции JavaScript при отправке связанного элемента DOM.
4	включить: <значение-привязки> Эта привязка используется для включения определенных элементов DOM на основе указанного условия.
5	отключить: <значение-привязки> Эта привязка отключает связанный элемент DOM, когда значение параметра истинно.
6	значение: <значение-привязки> Эта привязка используется для привязки значения соответствующего элемента DOM к свойству ViewModel.
7	textInput: <значение-привязки> Эта привязка используется для создания двусторонней привязки между текстовым полем или текстовым полем и свойством ViewModel.
8	hasFocus: <значение-привязки> Эта привязка используется для ручной установки фокуса элемента HTML DOM через свойство ViewModel.
9	проверено: <значение-привязки> Эта привязка используется для создания связи между проверяемым элементом формы и свойством ViewModel.
10	параметры: <массив-привязки> Эта привязка используется для определения параметров для элемента выбора.
11	selectedOptions: <массив-привязок> Эта привязка используется для работы с элементами, выбранными в данный момент в элементе управления формой выбора из нескольких списков.
12	uniqueName: <значение-привязки> Эта привязка используется для создания уникального имени для элемента DOM.