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.