フック¶

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.

これらのフックを使用すると、特定の問題を解決するための多くのカスタマイズされたフックを構築したり、いくつかの一般的なタスクを簡単にすることができます。このページの残りの部分は、Odoo ウェブフレームワークが提供するフックのリストです。

名前（name）	簡単な説明
useAssets	アセットを読み込む
useAutofocus	オートフォーカスによって参照される要素に自動的にフォーカスを当てます。
useBus	バスの定期購読を解除する
usePager	ビューのコントロールパネルのページャを表示します。
usePosition	要素をターゲットからの相対位置に置く
useSpellCheck	入力またはテキスト領域のスペルチェックを有効にする

useAssets¶

ロケーション¶

@web/core/assets

説明¶

詳細については、 :ref:`遅延読み込みアセット <frontend/assets/lazy_loading>`のセクションを参照してください。

useAutofact¶

ロケーション¶

@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()) -- ターゲットイベントバス
eventName (string()) -- 私たちが聞きたいイベントの名前は
callback (function()) -- listener callback

usePager¶

ロケーション¶

@web/search/pager_hook

説明¶

ビューのコントロールパネルの Pager <frontend/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()) -- 関数は、ページャーの prop を返します。

usePosition¶

ロケーション¶

@web/core/position_hook

説明¶

HTMLElement (popper) を別のHTMLElement (reference)に比較的配置するのに役立ちます。このフックは、ウィンドウのサイズ変更/スクロール時に位置が更新されることを保証します。

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

重要

t-ref ディレクティブを使用して、popper 要素を指定する必要があります。

API¶

usePosition(reference[, options])¶

引数

reference (HTMLElement or ()=>HTMLElement()) -- 配置されるターゲット HTMLElement
options (Options()) -- 配置オプション(下の表を参照)

Option	型	説明
`popper`	文字列	これは、配置される要素の useRefリファレンスです。デフォルトは `"popper"` です。
`コンテナー`	HTMLElement	ポッパーがオーバーフローしないと期待されるコンテナ。オーバーフローが発生した場合、オーバーフローしていない位置が見つかるまで、他のポップの位置が試されます。（デフォルト：`<html/>` ノード）
`margin`	数値	ポップと参照要素の間にマージンを追加しました (デフォルト: `0`)
`position`	方向[-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 { 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

説明¶

現在のコンポーネントで `t-ref="spellcheck"`によるフォーカスがある入力またはテキストエリアにスペルチェックの状態を有効にします。この状態は、コンテンツの読みやすさを向上させる赤色のアウトラインと同様に、ぼかし時に削除されます。

フックは contenteditable 属性を持つ任意の HTML 要素でも使用できます。フックによって有効になる可能性のある要素でスペルチェックを完全に無効にするには、要素の spellcheck 属性を false として明示的に設定します。

Example

次の例では、最初の入力、テキストエリア、および contenteditable="true" の div でスペルチェックが有効になります。

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()) -- スペルチェックのオプション (下の表を参照)

Option	型	説明
`refName`	文字列	これはスペルチェックが有効になる要素の useRefリファレンスです。