🦉 Теги(Tags) 🦉

Содержание

Введение

Теги — это очень маленькие помощники, предназначенные для упрощения написания встроенных шаблонов или стилей. В настоящее время есть два тега: css и xml. С помощью этих функций можно писать компоненты из одного файла.

Тег XML

Тег xml, безусловно, самый полезный тег. Он используется для определения встроенного шаблона QWeb для компонента. Без тегов создание автономного компонента выглядело бы так:

import { Component } from 'owl'

const name = 'some-unique-name';
const template = `
    <div>
        <span t-if="somecondition">text</span>
        <button t-on-click="someMethod">Click</button>
    </div>
`;
QWeb.registerTemplate(name, template);

class MyComponent extends Component {
    static template = name;

    ...
}

С тегами этот процесс немного упрощается. Имя генерируется уникально, и шаблон регистрируется автоматически:

const { Component } = owl;
const { xml } = owl.tags;

class MyComponent extends Component {
    static template = xml`
        <div>
            <span t-if="somecondition">text</span>
            <button t-on-click="someMethod">Click</button>
        </div>
    `;

    ...
}

CSS tag

Тег CSS полезен для определения таблицы стилей css в файле javascript:

class MyComponent extends Component {
  static template = xml`
        <div class="my-component">some template</div>
    `;
  static style = css`
    .my-component {
      color: red;
    }
  `;
}

Тег css регистрирует внутреннюю информацию css. Затем, всякий раз, когда будет создан первый экземпляр компонента, будет добавлен тег <style> к документу <head>.

Обратите внимание, чтобы сделать его более полезным, как и другие препроцессоры css, тег css принимает небольшое расширение спецификации css: области действия css могут быть вложенными, а правила затем будут расширены хелпером css:

.my-component {
  display: block;
  .sub-component h {
    color: red;
  }
}

Будет отформатировано как:

.my-component {
  display: block;
}
.my-component .sub-component h {
  color: red;
}

Это расширение предоставляет еще одну полезную функцию: селектор &, который ссылается на родительский селектор. Например, мы хотим, чтобы наш компонент был красным при наведении. Мы хотели бы написать что-то вроде:

.my-component {
  display: block;
  :hover {
    color: red;
  }
}

но он будет отформатирован как:

.my-component {
  display: block;
}
.my-component :hover {
  color: red;
}

Для решения этой проблемы можно использовать селектор &:

.my-component {
  display: block;
  &:hover {
    color: red;
  }
}

будет отформатирован как:

.my-component {
  display: block;
}
.my-component:hover {
  color: red;
}

Теперь тег css не выполняет никакой дополнительной обработки. Однако, поскольку это делается в javascript во время выполнения, у нас на самом деле больше возможностей. Например:

  1. обмен значениями между javascript и css:
import { theme } from "./theme";

class MyComponent extends Component {
  static template = xml`<div class="my-component">...</div>`;
  static style = css`
    .my-component {
      color: ${theme.MAIN_COLOR};
      background-color: ${theme.SECONDARY_color};
    }
  `;
}
  1. правила области видимости для текущего компонента:
import { generateUUID } from "./utils";

const uuid = generateUUID();

class MyComponent extends Component {
  static template = xml`<div data-o-${uuid}="">...</div>`;
  static style = css`
    [data-o-${uuid}] {
      color: red;
    }
  `;
}