Перехоплювачі¶

Owl hooks - це спосіб факторизації коду, навіть якщо це залежить від життєвого циклу якогось компонента. Більшість хуків, що надаються Owl, пов’язані з життєвим циклом компонента, але деякі з них (наприклад, useComponent) надають спосіб створення специфічних hooks.

Використовуючи ці hooks, можна створити багато налаштованих hooks, які допомагають вирішити певну проблему або спростити деякі поширені завдання. Решта цієї сторінки містить список hooks, що надаються веб-фреймворком Odoo.

Name	Короткий опис
useAssets	завантажити ресурси
useAutofocus	автоматично фокусується на елементі, на який посилається автофокус
useBus	підписатися та відписатися від bus
usePager	відобразити пейджер панелі керування представлення.
usePosition	позиціонувати елемент відносно цілі
useSpellCheck	активувати перевірку орфографії при фокусуванні на введеному тексті або текстовому полі

useAssets¶

Розташування¶

@web/core/assets

Опис¶

Дивіться розділ про відкладене завантаження ресурсів для отримання додаткової інформації.

useAutofocus¶

Розташування¶

@web/core/utils/hooks

Опис¶

Фокусувати елемент, на який посилається t-ref=»autofocus» у поточному компоненті, щойно він з’явиться в DOM, і якщо він не відображався раніше.

import { useAutofocus } from "@web/core/utils/hooks";

class Comp {
  setup() {
    this.inputRef = useAutofocus();
  }
  static template = "Comp";
}

<t t-name="Comp">
  <input t-ref="autofocus" type="text"/>
</t>

API¶

useAutofocus()¶

Повертає: посилання на елемент.

useBus¶

Розташування¶

@web/core/utils/hooks

Опис¶

Додати та очистити слухач подій до шини. Цей перехоплювач гарантує, що слухач буде належним чином очищено після відмонтування компонента.

import { useBus } from "@web/core/utils/hooks";

class MyComponent {
  setup() {
    useBus(this.env.bus, "some-event", event => {
      console.log(event);
    });
  }
}

API¶

useBus(bus, eventName, callback)¶

Аргументи

bus (EventBus()) – цільовий bus події
eventName (string()) – назва події, яку ми хочемо прослухати
callback (function()) – зворотний виклик слухача

usePager¶

Розташування¶

@web/search/pager_hook

Опис¶

Відображає Pager панелі керування представлення. Цей перехоплювач коректно встановлює env.config для надання властивостей пейджеру.

import { usePager } from "@web/search/pager_hook";

class CustomView {
  setup() {
    const state = owl.hooks.useState({
      offset: 0,
      limit: 80,
      total: 50,
    });
    usePager(() => {
      return {
        offset: this.state.offset,
        limit: this.state.limit,
        total: this.state.total,
        onUpdate: (newState) => {
          Object.assign(this.state, newState);
        },
      };
    });
  }
}

API¶

usePager(getPagerProps)¶

Аргументи

getPagerProps (function()) – функція, яка повертає властивості пейджера.

usePosition¶

Розташування¶

@web/core/position_hook

Опис¶

Допомагає позиціонувати HTMLElement (popper) відносно іншого HTMLElement (reference). Цей гачок гарантує оновлення позиціонування під час зміни розміру/прокручування вікна.

import { usePosition } from "@web/core/position_hook";

class MyPopover extends owl.Component {
  setup() {
    // Here, the reference is the target props, which is an HTMLElement
    usePosition(this.props.target);
  }
}
MyPopover.template = owl.tags.xml`
  <div t-ref="popper">
    I am positioned through a wonderful hook!
  </div>
`;

Важливо

Ви повинні вказати свій елемент popper за допомогою директиви t-ref.

API¶

usePosition(reference[, options])¶

Аргументи

reference (HTMLElement or ()=>HTMLElement()) – цільовий HTMLElement, з якого потрібно позиціонувати
options (Options()) – варіанти позиціонування (див. таблицю нижче)

Параметр	Тип	Опис
`popper`	string	це посилання useRef для елемента, який буде позиціоновано. Значення за замовчуванням - `"popper"`.
`container`	HTMLElement	контейнер, з якого очікується, що поппер не переповниться. У разі переповнення пробуються інші позиції popper, доки не буде знайдено таку, що не переповнюється. (за замовчуванням: вузол `<html/>`)
`margin`	number	додано відступ між елементами popper та reference (за замовчуванням: `0`)
`position`	Direction[-Variant]	бажана позиція. Це рядок, що складається з одного `Direction` та одного `Variant`, розділених символом дефіс. `Direction` може бути: `top`, `bottom`, `right`, `left`. `Variant` може бути: `start`, `middle`, `end`, `fit`. Варіант можна пропустити (варіант за замовчуванням - `middle`). Варіант `fit` означає, що поппер матиме точно таку ж ширину або висоту, залежно від обраного напрямку. Приклади допустимих позицій: `right-end`, `top-start`, `left-middle`, `left`, `bottom-fit`. (позиція за замовчуванням: `bottom`)
`onPositioned`	(el: HTMLElement, position: PositioningSolution) => void	зворотний виклик, який буде викликатися щоразу, коли відбувається позиціонування (наприклад, при монтуванні/патчі компонента, прокручуванні документа, зміні розміру вікна…). Може використовуватися, наприклад, для динамічного стилізації відносно поточної позиції. `PositioningSolution` – це об’єкт такого типу: `{ direction: Direction, variant: Variant, top: number, left: number }`.

Example

import { usePosition } from "@web/core/position_hook";

class DropMenu extends owl.Component {
  setup() {
    const toggler = owl.useRef("toggler");
    usePosition(
      () => toggler.el,
      {
        popper: "menu",
        position: "right-start",
        onPositioned: (el, { direction, variant }) => {
          el.classList.add(`dm-${direction}`); // -> "dm-top" "dm-right" "dm-bottom" "dm-left"
          el.style.backgroundColor = variant === "middle" ? "red" : "blue";
        },
      },
    );
  }
}
DropMenu.template = owl.tags.xml`
  <button t-ref="toggler">Toggle Menu</button>
  <div t-ref="menu">
    <t t-slot="default">
      This is the menu default content.
    </t>
  </div>
`;

useSpellCheck¶

Розташування¶

@web/core/utils/hooks

Опис¶

Активуйте стан перевірки орфографії для поля вводу або текстової області під час фокусування за допомогою t-ref="spellcheck" у поточному компоненті. Цей стан потім видаляється при розмитті, як і червоний контур, що покращує читабельність вмісту.

Hook також можна використовувати для будь-якого елемента HTML з атрибутом contenteditable. Щоб повністю вимкнути перевірку орфографії для елементів, які можуть бути ввімкнені хуком, явно встановіть атрибут spellcheck як false для елемента.

Example

У наступному прикладі перевірка орфографії буде ввімкнена для першого вхідного поля, текстового поля та div з параметром contenteditable="true".

import { useSpellCheck } from "@web/core/utils/hooks";

class Comp {
  setup() {
    this.simpleRef = useSpellCheck();
    this.customRef = useSpellCheck({ refName: "custom" });
    this.nodeRef = useSpellCheck({ refName: "container" });
  }
  static template = "Comp";
}

<t t-name="Comp">
  <input t-ref="spellcheck" type="text"/>
  <textarea t-ref="custom"/>
  <div t-ref="container">
    <input type="text" spellcheck="false"/>
    <div contenteditable="true"/>
  </div>
</t>

API¶

useSpellCheck([options])¶

Аргументи

options (Options()) – параметри перевірки орфографії (див. таблицю нижче)

Параметр	Тип	Опис
`refName`	string	це useRef reference для елемента, для якого буде ввімкнено перевірку орфографії.

Редагувати на GitHub