🦉 Окружение (Environment) 🦉

Содержание

Введение

Окружение это объект который содержит экземпляр QWeb. Однако при создании корневого компонета за ним закрепляется окружение (см. ниже для более подробной информации). Это окружение затем автоматически становится доступно каждому дочернему компоненту (и доступно через свойство this.env)

    Root
    /  \
   A    B

В этом случае все компоненты будут иметь доступ к одному экземпляру QWeb. Для внутреннего использования Owl требует, чтобы среда имела ключ qweb, который сопоставляется с экземпляром QWeb. Это экземпляр QWeb, который будет использоваться для рендеринга каждого шаблона в этом конкретном дереве компонентов. Обратите внимание, что если экземпляр QWeb не указан, Owl просто сгенерирует его на лету.

Окружение в основном статично. Каждое приложение может свободно добавлять в него что угодно, что очень полезно, поскольку к этому может получить доступ каждый дочерний компонет.

Настройка окружения

Для выполнения приложения Owl требуется окружение. В нем есть важный ключ: экземпляр QWeb, который будет рендерить все шаблоны.

Всякий раз, когда монтируется корневой компонент App, Owl настроит допустимую окружение, выполнив следующие шаги:

  • берет объект env, определенный в App.env (если env не был явно настроен, то вернет пустой объект env, определенный в Component)
  • если env.qweb не установлен, Owl создаст экземпляр QWeb.

Правильный способ настроить окружение — просто настроить его в корневом классе компонентов до того, как будет создан первый компонент:

const env = {
    _t: myTranslateFunction,
    user: {...},
    services: {
        ...
    },
};
mount(App, { target: document.body, env });

Этот подход можно применять для обмена окружением между корневыми компонентами, достаточно сделать примерно так:

Component.env = myEnv; // будет значением env по умолчанию для всех компнентов

Обратите внимание что это окружение является глобальным окружением owl для приложения. В следующей секции будет объяснено как расширить окружение для специфического дочернего компонента и его потомков.

Использвоание дочернего окружения

Иногда может быть полезно добавить один (или более) специальных ключа к окружению с точки зрения конкретного компонента и его дочерних элементов. В этом случае решение, представленное выше, не будет работать, так как оно устанавливает глобальную среду.

А вот и хук для текущей ситуации: useSubEnv.

class FormComponent extends Component {
  constructor(parent, props) {
    super(parent, props);
    useSubEnv({ myKey: someValue });
  }
}

Содержимое окружения

Вот несколько хороших вариантов использования дополнительных ключей в окружении:

  • ключи конфигурации,
  • информация о сессии,
  • общие сервисы (такие как выполнение rpcs).

Такой подход означает, что компоненты легко тестируются: мы можем просто создать тестовую среду с сервисами болванками.

Например:

async function myEnv() {
  const templates = await loadTemplates();
  const qweb = new QWeb({ templates });
  const session = getSession();

  return {
    _t: myTranslateFunction,
    session: session,
    qweb: qweb,
    services: {
      localStorage: localStorage,
      rpc: rpc,
    },
    debug: false,
    inMobileMode: true,
  };
}

async function start() {
  const env = await myEnv();
  mount(App, { target: document.body, env });
}

Специальные ключи

Owl добавляет два специальных ключа/значения, если они не предоставлены в среде: экземпляр QWeb и объект browser:

  • qweb будет установлен на пустой экземпляр QWeb. Это абсолютно необходимо для того, чтобы Owl могла отображать что угодно.
  • браузер: это объект, который содержит некоторые общие точки доступа к методам браузера с побочным эффектом. См. объект browser для получения дополнительной информации. Обратите внимание, что объект browser будет удален из окружения в Owl 2.0.