Hooks¶

Owl hook là một cách để phân tích mã, ngay cả khi nó phụ thuộc vào một số vòng đời thành phần. Hầu hết các hook do Owl cung cấp đều liên quan đến vòng đời của một thành phần, nhưng một số trong số đó (chẳng hạn như `useComponent <https://github.com/odoo/owl/blob/master/doc/reference/hooks.md#usecomComponent> `_) cung cấp cách xây dựng các hook cụ thể.

Sử dụng các hook này, có thể xây dựng nhiều hook tùy chỉnh giúp giải quyết một vấn đề cụ thể hoặc thực hiện một số tác vụ thông thường dễ dàng hơn. Phần còn lại của trang này ghi lại danh sách các hook được cung cấp bởi khung web SoOn.

Tên	Mô tả ngắn
useAssets	tải tài sản
useAutofocus	tự động lấy nét một phần tử được tham chiếu bằng tính năng tự động lấy nét
useBus	đăng ký và hủy đăng ký xe buýt
usePager	Hiển thị máy nhắn tin của bảng điều khiển của chế độ xem.
usePosition	định vị một phần tử liên quan đến mục tiêu
useSpellCheck	kích hoạt kiểm tra chính tả trên tiêu điểm cho đầu vào hoặc vùng văn bản

sử dụngAssets¶

Vị trí¶

@web/core/assets

Sự miêu tả¶

Xem phần trên tải nội dung lười biếng để biết thêm chi tiết.

sử dụngTự động lấy nét¶

Vị trí¶

@web/core/utils/hooks

Sự miêu tả¶

Tập trung vào phần tử được tham chiếu bởi t-ref="autofocus" trong thành phần hiện tại ngay khi nó xuất hiện trong DOM và nếu nó không được hiển thị trước đó.

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

Trả về: tham chiếu phần tử.

sử dụngBus¶

Vị trí¶

@web/core/utils/hooks

Sự miêu tả¶

Thêm và xóa trình xử lý sự kiện vào xe buýt. Móc này đảm bảo rằng người nghe được xóa chính xác khi thành phần được ngắt kết nối.

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

Đối số

bus (EventBus()) -- xe buýt sự kiện mục tiêu
eventName (string()) -- tên của sự kiện mà chúng tôi muốn nghe
callback (function()) -- cuộc gọi lại của người nghe

sử dụngPager¶

Vị trí¶

@web/search/pager_hook

Sự miêu tả¶

Hiển thị Pager của bảng điều khiển của chế độ xem. Móc này đặt chính xác env.config để cung cấp đạo cụ cho máy nhắn tin.

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

Đối số

getPagerProps (function()) -- hàm trả về đạo cụ máy nhắn tin.

sử dụngVị trí¶

Vị trí¶

@web/core/position_hook

Sự miêu tả¶

Giúp định vị một HTMLElement (popper) tương ứng với một HTMLElement khác (reference). Móc này đảm bảo vị trí được cập nhật khi cửa sổ được thay đổi kích thước/cuộn.

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>
`;

Quan trọng

Bạn nên chỉ ra phần tử popper của mình bằng lệnh t-ref.

API¶

usePosition(reference[, options])¶

Đối số

reference (HTMLElement or ()=>HTMLElement()) -- HTMLElement mục tiêu được định vị từ
options (Options()) -- các tùy chọn định vị (xem bảng bên dưới)

Lựa chọn	Kiểu	Sự miêu tả
`popper`	sợi dây	đây là tham chiếu useRef cho phần tử sẽ được định vị. Mặc định là `"popper"`.
`thùng chứa`	Phần tử HTML	thùng chứa mà từ đó popper dự kiến sẽ không bị tràn. Nếu tràn xảy ra, các vị trí popper khác sẽ được thử cho đến khi tìm thấy vị trí không tràn. (mặc định: nút `<html/>`)
`lề`	con số	đã thêm lề giữa các phần tử popper và tham chiếu (mặc định: `0`)
`vị trí`	Hướng[-Biến thể]	vị trí mong muốn. Nó là một chuỗi bao gồm một `Hướng` và một `Biến thể` được phân tách bằng ký tự dấu gạch ngang. `Hướng` có thể là: `trên`, `dưới`, `phải`, `trái`. `Biến thể` có thể là: `bắt đầu`, `giữa`, `kết thúc`, `phù hợp`. Biến thể có thể được bỏ qua (biến thể mặc định là `giữa`). Biến thể `fit` có nghĩa là popper sẽ có chiều rộng hoặc chiều cao giống hệt nhau, tùy thuộc vào hướng đã chọn. Ví dụ về các vị trí hợp lệ: `right-end`, `top-start`, `left-middle`, `left`, `bottom-fit`. (vị trí mặc định: `dưới`)
`onPositioned`	(el: HTMLElement, vị trí: Giải pháp định vị) => void	một cuộc gọi lại sẽ được gọi mỗi khi xảy ra định vị (ví dụ: trên thành phần được gắn/vá, cuộn tài liệu, thay đổi kích thước cửa sổ...). Có thể được sử dụng tức là để tạo kiểu năng động liên quan đến vị trí hiện tại. `PositioningSolution` là một đối tượng có loại sau: `{ hướng: Hướng, biến thể: Biến thể, trên cùng: số, trái: số }`.

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>
`;

sử dụngKiểm tra chính tả¶

Vị trí¶

@web/core/utils/hooks

Sự miêu tả¶

Kích hoạt trạng thái kiểm tra chính tả cho đầu vào hoặc vùng văn bản được lấy tiêu điểm bằng t-ref="kiểm tra chính tả" trong thành phần hiện tại. Trạng thái này sau đó sẽ bị loại bỏ khi bị mờ cũng như đường viền màu đỏ, giúp cải thiện khả năng đọc nội dung.

Hook cũng có thể được sử dụng trên bất kỳ phần tử HTML nào có thuộc tính contenteditable. Để tắt hoàn toàn tính năng kiểm tra chính tả trên các phần tử có thể được bật bằng hook, hãy đặt rõ ràng thuộc tính kiểm tra chính tả là false trên phần tử.

Example

Trong ví dụ sau, tính năng kiểm tra chính tả sẽ được bật ở đầu vào đầu tiên, vùng văn bản và div có 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])¶

Đối số

options (Options()) -- các tùy chọn kiểm tra chính tả (xem bảng bên dưới)

Lựa chọn	Kiểu	Sự miêu tả
`tên giới thiệu`	sợi dây	đây là tham chiếu useRef cho phần tử sẽ được bật kiểm tra chính tả.