Веб-компоненты можно рассматривать как единицу повторного использования в JET. Это также помогает нам инкапсулировать сложную логику представления и модели в простой интерфейс, чтобы компонент мог легко распространяться и использоваться другими разработчиками.

Распад веб-компонентов

Метаданные компонента

Описание интерфейса компонента, также называемое метаданными компонента, которое обычно определяется в файле component.json, определяет 3 основных способа взаимодействия компонента с остальной частью страницы.

  1. свойства: атрибуты, которые принимает ваш компонент при его объявлении в html. например. метаданные, значение — это свойства, принимаемые нижеприведенным компонентом.
<demo-component metadata=”[[ metadata]]” value=”{{ value }}”></demo-component>

2. методы: вы можете предоставлять методы/JS-функции через html-элемент DOM компонента, который вы можете вызывать через JS.

3.события: ваш компонент может отправлять события, чтобы сообщить странице о событии.

Модель представления компонентов

Модель представления или просто уровень модели отвечает за создание слоя JS, на котором будет находиться логика вашего компонента.

Вид компонента

Уровень представления будет содержать html или логику рендеринга.

Загрузчик компонентов

Загрузчик (обычно файл loader.js) отвечает за загрузку всех файлов и их начальную загрузку, чтобы компонент был зарегистрирован как веб-компонент.

Динамическая форма как веб-компонент

Наконец, мы завершаем эту серию, создавая компонент динамической формы. Он работает на идеях, которые мы обсуждали в частях 1–4.

См. окончательное приложение, размещенное здесь. вы можете играть вместе с компонентом, используя живой редактор, созданный с помощью monaco-editor.

Анализ компонента динамической формы

компонент.json

Компонент поддерживает множество свойств, некоторые из них, такие как labelEdge, labelWidth и т. д., являются стандартными свойствами формы, которые мы применяем к внутреннему макету oj-form-layout. компонент. Наиболее важными из них являются метаданные и значение (остальные имеют значения по умолчанию), как вы можете видеть в окончательном демонстрационном приложении здесь. Итак, у нас есть метаданные, с помощью которых мы можем отобразить форму, и значение, с помощью которого мы можем предоставить значение по умолчанию и собрать значения, введенные пользователем.

динамическая форма-viewModel.js

Вью-модель содержит логику создания формы, в основном эти функции отвечают.

  1. generateField: извлекает зависимости элемента управления/поля с помощью RequireJs. Вставляет поле в _metadataArr, применяет свойство с помощью метода applyProperties и, наконец, разрешает промис, если все идет хорошо.
  2. bindingsApplied: это метод жизненного цикла, который вызывается после того, как модель JS будет ограничена html. Он перебирает поля формы и вставляет одно поле за другим. После вставки полей он подписывается на свойство value для обновления изменений значений и устанавливает свойства отображения для oj-form-layout.
  3. applyProperties : использует метод setProperties для каждого компонента, чтобы установить указанные пользователем свойства. этот шаг включает в себя добавление таких свойств, как labelHint, валидаторы и т. д.
  4. validate: проверяет с помощью oj-validaton-group состояние формы.
  5. showMessages: отображает все сообщения об ошибках/предупреждениях/информации, полезные для отображения ошибок формы.
  6. focusOn: перемещает фокус на определенное поле. полезно для фокусировки на полях с ошибкой.

динамическая форма-view.html

Часть html или представления очень проста и использует следующее:

  1. oj-validation-group: отвечает за проверку формы и передачу состояния на страницу через свойство valid компонента.
  2. oj-form-layout: отвечает за создание макета for и его адаптивность.
  3. oj-bind-for-each: перебирает поля формы и отображает их.
  4. oj-bind-if: условное отображение на основе типа поля.