[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:
Géry Debongnie
2019-11-11 17:31:34 +01:00
committed by aab-odoo
parent b891ae7de4
commit 263f31fea9
12 changed files with 454 additions and 351 deletions
-47
View File
@@ -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);
}
```
+2 -2
View File
@@ -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.