mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[DOC] miscellaneous improvements
including: - add a link to the tutorial in the main readme page - remove learning page on 'env', move content on reference page - add dynamic sub components section in component page - add reference page on props - split qweb page into engine/language pages - move t-key information into qweb language page
This commit is contained in:
@@ -1,47 +0,0 @@
|
||||
# 🦉 Environment 🦉
|
||||
|
||||
An environment is an object which contains a [`QWeb` instance](../reference/qweb.md).
|
||||
Whenever a root component is created, it is assigned an environment (see the
|
||||
reference section on [environment](../reference/environment.md). This environment
|
||||
is then automatically given to each sub components (and accessible in the `this.env` property).
|
||||
|
||||
The environment is mostly static. Each application is free to add anything to
|
||||
the environment, which is very useful, since this can be accessed by each sub
|
||||
component.
|
||||
|
||||
Some good use cases for the environment is:
|
||||
|
||||
- some configuration keys,
|
||||
- session information,
|
||||
- generic services (such as doing rpcs, or accessing local storage).
|
||||
|
||||
Doing it this way means that components are easily testable: we can simply
|
||||
create a test environment with mock services.
|
||||
|
||||
For example:
|
||||
|
||||
```js
|
||||
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() {
|
||||
App.env = await myEnv();
|
||||
const app = new App();
|
||||
await app.mount(document.body);
|
||||
}
|
||||
```
|
||||
@@ -181,14 +181,14 @@ class App extends Component {
|
||||
}
|
||||
```
|
||||
|
||||
The template contains a [`t-foreach`](../reference/qweb.md#loops) loop to iterate
|
||||
The template contains a [`t-foreach`](../reference/qweb_templating_language.md#loops) loop to iterate
|
||||
through the tasks. It can find the `tasks` list from the component, since the
|
||||
component is the rendering context. Note that we use the `id` of each task as a
|
||||
`t-key`, which is very common. There are two css classes: `task-list` and `task`,
|
||||
that we will use in the next section.
|
||||
|
||||
Finally, notice the use of the `t-att-checked` attribute:
|
||||
prefixing an attribute by [`t-att`](../reference/qweb.md#dynamic-attributes) makes
|
||||
prefixing an attribute by [`t-att`](../reference/qweb_templating_language.md#dynamic-attributes) makes
|
||||
it dynamic. Owl will evaluate the expression and set it as the value of the
|
||||
attribute.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user