hookها

Owl hooks are a way to factorize code, even if it depends on some component lifecycle. Most hooks provided by Owl are related to the lifecycle of a component, but some of them (such as useComponent) provide a way to build specific hooks.

Using these hooks, it is possible to build many customized hooks that help solve a specific problem, or make some common tasks easier. The rest of this page documents the list of hooks provided by the Odoo web framework.

نام	توضیح کوتاه
useAssets	بارگذاری assets
useAutofocus	تمرکز خودکار روی عنصری که با autofocus ارجاع داده شده است
useBus	اشتراک و لغو اشتراک به یک گذرگاه
usePager	نمایش pager پنل کنترل یک نما.
usePosition	موقعیت‌دهی یک عنصر نسبت به یک هدف
useSpellCheck	فعال‌سازی غلط‌یاب در زمان فوکوس برای input یا textarea

useAssets

موقعیت

@web/core/assets

توضیحات

See the section on lazy loading assets for more details.

useAutofocus

موقعیت

@web/core/utils/hooks

توضیحات

Focus an element referenced by a t-ref="autofocus" in the current component as soon as it appears in the DOM and if it was not displayed before.

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

توضیحات

Add and clear an event listener to a bus. This hook ensures that the listener is properly cleared when the component is unmounted.

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()) -- گذرگاه رویداد هدف

• eventName (string()) -- نام رویدادی که می‌خواهیم به آن گوش دهیم

• callback (function()) -- callback شنونده

usePager

موقعیت

@web/search/pager_hook

توضیحات

Display the Pager of the control panel of a view. This hooks correctly sets env.config to provide the props to the pager.

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()) -- تابعی که props‌های pager را بازمی‌گرداند.

usePosition

موقعیت

@web/core/position_hook

توضیحات

Helps positioning an HTMLElement (the popper) relatively to another HTMLElement (the reference). This hook ensures the positioning is updated when the window is resized/scrolled.

import { usePosition } from "@web/core/position_hook";
import { Component, xml } from "@odoo/owl";

class MyPopover extends Component {
  static template = xml`
    <div t-ref="popper">
      I am positioned through a wonderful hook!
    </div>
  `;

  setup() {
    // Here, the reference is the target props, which is an HTMLElement
    usePosition(this.props.target);
  }
}

مهم

You should indicate your popper element using a t-ref directive.

API

usePosition(reference[, options])

نشانوندها

• reference (HTMLElement or ()=>HTMLElement()) -- HTMLElement هدفی که موقعیت‌دهی از آن انجام می‌شود

• options (Options()) -- گزینه‌های موقعیت‌دهی (به جدول زیر مراجعه کنید)

گزینه	نوع	توضیحات
popper	string	this is a useRef reference for the element that will get positioned. Default is "popper".
container	HTMLElement	the container from which the popper is expected not to overflow. If overflowing occurs, other popper positions are tried until a not overflowing one is found. (default: the <html/> node)
margin	عدد	حاشیهٔ اضافی بین عناصر popper و reference (پیش‌فرض: 0)
position	Direction[-Variant]	the desired position. It is a string composed of one Direction and one Variant separated by a dash character. Direction could be: top, bottom, right, left. Variant could be: start, middle, end, fit. The variant can be omitted (default variant is middle). The fit variant means that the popper would have the exact same width or height, depending on the chosen direction. Examples of valid positions: right-end, top-start, left-middle, left, bottom-fit. (default position: bottom)
onPositioned	(el: HTMLElement, position: PositioningSolution) => void	a callback that will be called everytime a positioning occurs (e.g. on component mounted/patched, document scroll, window resize...). Can be used i.e. for dynamic styling regarding the current position. The PositioningSolution is an object having the following type: { direction: Direction, variant: Variant, top: number, left: number }.

Example

import { Component, xml, useRef } from "@odoo/owl";
import { usePosition } from "@web/core/position_hook";

class DropMenu extends Component {
  static template = xml`
    <button t-ref="toggler">Toggle Menu</button>
    <div t-ref="menu">
      <t t-slot="default">
        This is the menu default content.
      </t>
    </div>
  `;

  setup() {
    const toggler = 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";
        },
      },
    );
  }
}

useSpellCheck

موقعیت

@web/core/utils/hooks

توضیحات

Activate the spellcheck state to an input or textarea on focus by a t-ref="spellcheck" in the current component. This state is then removed on blur, as well as the red outline, which improves readability of the content.

The hook can also be used on any HTML element with the contenteditable attribute. To disable spellcheck completely on elements that might be enabled by the hook, set explicitly the spellcheck attribute as false on the element.

Example

In the following example, the spellcheck will be enabled on the first input, the textarea and the div with 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	this is a useRef reference for the element that will be spellcheck enabled.