Контекст биндинга — Knockout.js

Контекст биндинга — это объект, содержащий данные от биндингов, на которые можно ссылаться. При применении биндингов, Knockout автоматически создает и управляет иерархией контекстов биндингов. Корневой уровень (англ. root level) иерархии указывает на параметр viewModel переданный в ko.applyBindings(viewModel). Затем, каждый раз при использовании биндингов для управления потоками данных, таких как with или foreach, которые создают дочерний контекст биндинга, указывающий на вложенные данные из модели представления.

Контексты биндингов предоставляют следующие специальные свойства, которые вы можете использовать в любом биндинге:

• $parent
  Это объект модели представления в родительском контексте, тот, что идет сразу вне текущего контекста. В контексте корневого элемента, вернет undefined. Пример:

  <h1 data-bind="text: name"></h1>
   
  <div data-bind="with: manager">
      <!-- Теперь мы находимся внутри вложенного контекста -->
      <span data-bind="text: name"></span> это менеджер для <span data-bind="text: $parent.name"></span>
  </div>

• $parents Это массив, представляющий все родительские модели представления, ниже рассмотрим контексты как семейное древо (от переводчика: не нашел похожих слов соответствующих английским):$parents[0] это модель представления из родительского контекста (тоже самое что $parent)$parents[1] это модель представления из контекста родителя для родителя (дедушка — англ. grandparent)$parents[2] это модель представления из контекста родителя для родителя родителя (прадедушка — англ. great-grandparent)… и так далее.
• $root
  Это основной объект модели представления в корневом контексте, то есть, самый верхний родительский элемент. Обычно является объектом, переданным в ko.applyBindings. Эквивалент для $parents[$parents.length — 1].
• $component
  Если вы находитесь внутри контекста конкретного шаблона компонента, то $component указывает на модель представления для этого компонента. Это эквивалент $root, но для компонента. В случае с вложенными компонентами, $component указывает на модель представления ближайшего компонента.Например, это полезно, если шаблон компонента включает один или более блоков foreach в котором нужно указать на некоторое свойство или функцию в модели представления компонента, а не у текущего элемента.
• $data
  Это объект модели представления в текущем контексте. В корневом контексте, $data и $root эквивалентны. Внутри вложенных контекстов биндингов, этот параметр будет приравнен к текущему элементу данных (например, внутри биндинг with: person, $data будет указывать на person). $data удобна, когда нужно указать на саму модель представления, а не на свойство модели представления. Пример:

  <ul data-bind="foreach: ['кошки', 'собаки', 'рыба']">
      <li>Данная категория животных <span data-bind="text: $data"></span></li>
  </ul>

• $index (доступен только внутри биндинга foreach)
  Индекс (отсчет с 0) текущего элемента массива, визуализируемого биндингом foreach. В отличии от других свойств контекстов биндингов, $index является observable-переменной и обновляется, когда индекс элемента изменяется (например, если элементы были добавлены или удалены из массива).
• $parentContext
  Данный контекст указывает на объект контекста биндинга родительского уровня. Он отличен от $parent, который ссылается на data (не является контекстом биндинга) на родительском уровне. Например, это полезно, если нужно получить доступ к значению индекса внешнего foreach элемента из вложенного контекста (использование: $parentContext.$index). Вернет undefined в корневом контексте.
• $rawData
  Это «сырое» значение модели представления в текущем контексте. Обычно это то же самое, что и $data, но если модель представления, переданная в Knockout обернута в observable-переменную, $data вернет извлеченную (англ. unwrapped) модель представления, а $rawData вернет observable-переменную без преобразования.
• $componentTemplateNodes
  Если вы внутри контекста конкретного шаблона компонента, то $componentTemplateNodes это массив, содержащий любые DOM узлы которые были переданы в компонент. Это позволяет легко строить компоненты, которые получают на вход шаблон, например компонент grid, который принимает шаблон для определения строк на выходе. Для готовых примеров, смотри: передача разметки в компоненты.

Следующие специальные переменные так же доступны в биндингах, но не явлются частью объекта контекста:

• $context
  Указывает на текущий объект контекста биндинга. Может быть полезен, если вы хотите получить доступ к свойствам контекста, когда они могут так же существовать в модели представления, или если хотите передать объект контекста во вспомогательную функцию вашей модели представления.
• $element
  Это DOM-элемент (для вирутальных элементов, это будет объект комментария в DOM) для текущего биндинга. Может быть полезно, если биндингу нужно получить доступ к атрибутам текущего элемента. Пример:
  <div id="item1" data-bind="text: $element.id"></div>

Контроль или изменение контекста биндинга в собственных биндингах

Как и во встроенных биндингах with и foreach, собственные/произвольные биндинги могут изменять контекст для их элементов-потомков, или предоставлять специальные свойства через расширение объекта контекста биндинга. Это подробно описано в создании собственных биндингов, которые управляют биндингами потомков.

---

Эксклюзивно для сайта skv1991.ru

Перепечатка и копирование строго запрещены.

Оригинал страницы