[DOC] doc: improve qweb documentation

This commit is contained in:
Géry Debongnie
2019-04-25 17:24:39 +02:00
parent 2bd0719b9a
commit c405dadc1b
2 changed files with 31 additions and 23 deletions
+3
View File
@@ -82,6 +82,9 @@ widgets:
In this example, the template create a widget MyWidget just after the span. See
the [QWeb](qweb.md) documentation for more information on the `t-widget` directive.
Note that the rendering context for the template is the widget itself. This means
that the template can access `state`, `props`, `env`, or any methods defined in the widget.
## Reference
An Owl component is a small class which represent a widget or some UI element.
+28 -23
View File
@@ -1,35 +1,40 @@
# 🦉 QWeb 🦉
QWeb is a template specification. The QWeb class in this repository is:
## Content
- [Overview](#overview)
- [Base Specification](#qweb-specification)
- [OWL Specific Extensions](#owl-specific-extensions)
## Overview
[QWeb](https://www.odoo.com/documentation/12.0/reference/qweb.html) is the primary templating engine used by Odoo. It is based on the XML format, and used
mostly to generate html.
Template directives are specified as XML attributes prefixed with `t-`, for instance `t-if` for conditionals, with elements and other attributes being rendered directly.
To avoid element rendering, a placeholder element `<t>` is also available, which executes its directive but doesnt generate any output in and of itself.
The QWeb implementation in the OWL project is slightly different. It compiles
templates into functions that output a virtual DOM instead of a string. This is
necessary for the component system. In addition, it has a few extra directives
(see [OWL Specific Extensions](#owlspecificextensions))
**Note on white spaces:** white spaces in a templates are handled in a special way:
- consecutive whitespaces are always condensed to a single whitespace
- if a whitespace-only text node contains a linebreak, it is ignored
- the previous rules do not apply if we are in a `<pre>` tag
- an implementation of the QWeb specification
- which outputs a virtual dom instead of a string
- and extended with a few extra directives
## QWeb Specification
add here a full description of what QWeb is supposed to be, with some examples
Todo
## QWeb Implementation
```javascript
var qweb = new QWeb();
qweb.addTemplate("sometemplate", '<div>hello <t t-esc="name"/></div>');
// result is a vnode which represent <div>hello world</div>
result = qweb.render("sometemplate", { name: "world" });
```
## QWeb extensions
## OWL Specific Extensions
- t-on directive
- t-widget, t-props, t-key
- t-ref
## Note on white spaces
White spaces in a templates are handled in a special way:
- consecutive whitespaces are always condensed to a single whitespace
- if a whitespace-only text node contains a linebreak, it is ignored
- the previous rules do not apply if we are in a `<pre>` tag