Horgok¶

Owl horgok egy módja a kód faktorizálásának, még akkor is, ha az függ egy komponens életciklusától. Az Owl által biztosított legtöbb horog a komponens életciklusához kapcsolódik, de néhányuk (mint például a useComponent) lehetőséget nyújt specifikus horgok létrehozására.

Ezeknek a hookoknak a használatával lehetőség van számos testreszabott hook létrehozására, amelyek segítenek egy adott probléma megoldásában, vagy megkönnyítik néhány általános feladat elvégzését. Az oldal további része az Odoo webes keretrendszer által biztosított hookok listáját dokumentálja.

Név	Rövid leírás
useAssets	eszközök betöltése
useAutofocus	egy elem automatikus fókuszálása, amelyre az autofocus hivatkozik
useBus	feliratkozás és leiratkozás egy buszra
usePager	A nézet vezérlőpaneljének lapozójának megjelenítése.
usePosition	egy elem elhelyezése egy célponthoz viszonyítva
useSpellCheck	helyesírás-ellenőrzés aktiválása fókusz esetén input vagy textarea elemeknél

useAssets¶

Helyszín¶

@web/core/assets

Leírás¶

További részletekért lásd a lazy loading assets szakaszt.

useAutofocus¶

Helyszín¶

@web/core/utils/hooks

Leírás¶

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()¶

Visszatérési érték: az elem hivatkozása.

useBus¶

Helyszín¶

@web/core/utils/hooks

Leírás¶

Adjon hozzá és töröljön egy eseményfigyelőt egy buszhoz. Ez a horog biztosítja, hogy a figyelő megfelelően törlődjön, amikor a komponens eltávolításra kerül.

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)¶

Argumentum

bus (EventBus()) – a cél eseménybusz
eventName (string()) – az esemény neve, amelyet figyelni szeretnénk
callback (function()) – figyelő visszahívás

usePager¶

Helyszín¶

@web/search/pager_hook

Leírás¶

Megjeleníti a nézet vezérlőpaneljének Pager-ét. Ez a horog helyesen állítja be az env.config-ot, hogy biztosítsa a tulajdonságokat a lapozó számára.

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)¶

Argumentum

getPagerProps (function()) – függvény, amely visszaadja a lapozó tulajdonságait.

usePosition¶

Helyszín¶

@web/core/position_hook

Leírás¶

Segít egy HTMLElement (a popper) pozicionálásában egy másik HTMLElementhez (a reference) képest. Ez a hook biztosítja, hogy a pozicionálás frissüljön, amikor az ablak mérete megváltozik vagy görgetés történik.

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);
  }
}

Fontos

Meg kell adnia a popper elemét egy t-ref irányelv használatával.

API¶

usePosition(reference[, options])¶

Argumentum

reference (HTMLElement or ()=>HTMLElement()) – a cél HTMLElement, amelyhez képest pozicionálni kell
options (Options()) – a pozicionálási opciók (lásd az alábbi táblázatot)

Opció	Típus	Leírás
`popper`	karakterlánc	this is a useRef reference for the element that will get positioned. Default is `"popper"`.
`container`	HTMLElement	a tároló, amelyből a popper nem várhatóan túlcsordul. Ha túlcsordulás történik, más popper pozíciókat próbálunk ki, amíg nem találunk egy nem túlcsordulót. (alapértelmezett: a `<html/>` node)
`margin`	szám	hozzáadott margó a popper és a referencia elemek között (alapértelmezett: `0`)
`position`	Irány[-Változat]	a kívánt pozíció. Ez egy olyan karakterlánc, amely egy `Irány`-ból és egy `Változat`-ból áll, amelyeket egy kötőjel választ el. Az `Irány` lehet: `top`, `bottom`, `right`, `left`. A `Változat` lehet: `start`, `middle`, `end`, `fit`. A változat elhagyható (alapértelmezett változat a `middle`). A `fit` változat azt jelenti, hogy a popper pontosan ugyanolyan szélességű vagy magasságú lenne, a választott iránytól függően. Érvényes pozíciók példái: `right-end`, `top-start`, `left-middle`, `left`, `bottom-fit`. (alapértelmezett pozíció: `bottom`)
`onPositioned`	(el: HTMLElement, position: PositioningSolution) => void	egy visszahívás, amely minden alkalommal meghívásra kerül, amikor egy pozicionálás történik (pl. komponens felhelyezése/javítása, dokumentum görgetése, ablak átméretezése…). Használható például a jelenlegi pozícióhoz kapcsolódó dinamikus stílushoz. A `PositioningSolution` egy objektum, amely a következő típusú: `{ 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";
        },
      },
    );
  }
}

helyesírás-ellenőrzés használata¶

Helyszín¶

@web/core/utils/hooks

Leírás¶

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.

A hook bármely HTML elemre is alkalmazható, amely rendelkezik contenteditable attribútummal. Ha teljesen le szeretné tiltani a helyesírás-ellenőrzést azokon az elemeken, amelyeket a hook engedélyezhet, állítsa be kifejezetten az elem spellcheck attribútumát false értékre.

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])¶

Argumentum

options (Options()) – a helyesírás-ellenőrzési opciók (lásd az alábbi táblázatot)

Opció	Típus	Leírás
`refName`	karakterlánc	ez egy useRef referencia az elemhez, amelyen a helyesírás-ellenőrzés engedélyezve lesz.