KnockoutJS — декларативные привязки

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

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

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

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

Привязка состоит из 2 элементов: имени и значения привязки. Ниже приведен простой пример —

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

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

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

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

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

Значением привязки может быть одно значение , литерал , переменная или выражение 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, вы можете пропустить значение привязки, которое даст привязке неопределенное значение.

Пробелы не имеют никакого значения.

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

Связывающий контекст

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

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

$ корневая

Это всегда относится к ViewModel верхнего уровня. Это позволяет получить доступ к методам верхнего уровня для управления ViewModel. Обычно это объект, который передается в ko.applyBindings.

$ данных

Это свойство очень похоже на это ключевое слово в объекте Javascript. Свойство $ data в контексте привязки ссылается на объект ViewModel для текущего контекста.

$ индекс

Это свойство содержит индекс текущего элемента массива внутри цикла foreach. Значение $ index будет меняться автоматически по мере обновления базового массива Observable. Очевидно, что этот контекст доступен только для привязок foreach .

$ родитель

Это свойство ссылается на родительский объект ViewModel. Это полезно, когда вы хотите получить доступ к внешним свойствам ViewModel из вложенного цикла.

$ parentContext

Объект контекста, который связан на родительском уровне, называется $ parentContext . Это отличается от $ parent . $ parent ссылается на данные. Принимая во внимание, что $ parentContext ссылается на контекст привязки. Например, вам может понадобиться доступ к индексу внешнего элемента foreach из внутреннего контекста.

$ RAWDATA

Этот контекст содержит необработанное значение ViewModel в текущей ситуации. Это похоже на $ data, но разница в том, что если ViewModel обернут в Observable, то $ data становится просто развернутым. ViewModel и $ rawdata становятся фактическими наблюдаемыми данными.

$ компонент

Этот контекст используется для ссылки на ViewModel этого компонента, когда вы находитесь внутри определенного компонента. Например, вы можете захотеть получить доступ к некоторому свойству из ViewModel вместо текущих данных в разделе шаблона компонента.

$ componentTemplateNodes

Это представляет собой массив узлов DOM, переданных этому конкретному компоненту, когда вы находитесь в определенном шаблоне компонента.

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

• $ context — это ничто иное, как существующий объект контекста привязки.

• $ element — этот объект ссылается на элемент в DOM в текущей привязке.

$ context — это ничто иное, как существующий объект контекста привязки.

$ element — этот объект ссылается на элемент в DOM в текущей привязке.

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

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

Показать или скрыть HTML DOM элемент в зависимости от определенных условий.

Чтобы установить содержимое элемента HTML DOM.

Чтобы установить содержимое HTML-разметки элемента DOM.

Применять CSS-классы к элементу.

Чтобы определить встроенный атрибут стиля элемента.

Добавить атрибуты к элементу динамически.

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

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

В этой привязке каждый элемент массива ссылается в разметке HTML в цикле.

Если условие истинно, то данная разметка HTML будет обработана. Иначе, оно будет удалено из DOM.

Отрицание если. Если условие истинно, то данная разметка HTML будет обработана. Иначе, оно будет удалено из DOM.

Эта привязка используется для привязки дочерних элементов объекта в контексте указанного объекта.

Эта привязка используется для вставки компонента в элементы DOM и передачи параметров по желанию.

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

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

Эта привязка используется для вызова функции JavaScript, связанной с элементом DOM, на основе щелчка.

Эта привязка используется для прослушивания указанных событий DOM и вызова связанных с ними функций-обработчиков на их основе.

Эта привязка используется для вызова функции JavaScript при отправке связанного элемента DOM.

Эта привязка используется для включения определенных элементов DOM на основе указанного условия.

Эта привязка отключает связанный элемент DOM, когда параметр оценивается как true.

Эта привязка используется для привязки значения соответствующего элемента DOM к свойству ViewModel.

Эта привязка используется для создания двусторонней привязки между текстовым полем или свойством textarea и ViewModel.

Эта привязка используется для ручной установки фокуса элемента HTML DOM через свойство ViewModel.

Эта привязка используется для создания ссылки между проверяемым элементом формы и свойством ViewModel.

Эта привязка используется для определения параметров элемента select.

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

Эта привязка используется для генерации уникального имени для элемента DOM.