mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[DOC] doc: improve qweb documentation
This commit is contained in:
@@ -82,6 +82,9 @@ widgets:
|
|||||||
In this example, the template create a widget MyWidget just after the span. See
|
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.
|
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
|
## Reference
|
||||||
|
|
||||||
An Owl component is a small class which represent a widget or some UI element.
|
An Owl component is a small class which represent a widget or some UI element.
|
||||||
|
|||||||
+28
-23
@@ -1,35 +1,40 @@
|
|||||||
# 🦉 QWeb 🦉
|
# 🦉 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 doesn’t 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
|
## QWeb Specification
|
||||||
|
|
||||||
add here a full description of what QWeb is supposed to be, with some examples
|
Todo
|
||||||
|
|
||||||
## QWeb Implementation
|
## OWL Specific Extensions
|
||||||
|
|
||||||
```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
|
|
||||||
|
|
||||||
- t-on directive
|
- t-on directive
|
||||||
- t-widget, t-props, t-key
|
- t-widget, t-props, t-key
|
||||||
- t-ref
|
- 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
|
|
||||||
|
|||||||
Reference in New Issue
Block a user