Introduction.
Qweb is an XML template engine similar to Genshi & Jinja2. It acts as the primary template engine in Odoo version 12. Odoo uses Qweb operations mainly for generating reports as it provisions several tools for generating the same. Click here to read the basic Qweb operations.
Attributes.
QWeb can process attributes runtime and set the result of the processing on the output node. This is done by means of the t-att (attribute) directive which exists in 3 distinct structures:
t-att-$name
an attribute called $name is created, value is then evaluated and the result is set as the attribute’s value:
Example:
<div t-att-a="42"/>
will be rendered as:
<div a="42"></div>
t-attf-$name
The difference between t-att-$name and t-attf-$name is that the parameters of t-attf-$name is a format string while the former is an expression. It is commonly used to define classes.
Example:
<t t-foreach="[1, 2, 3, 4]" t-as="item">
<li t-attf-class="row {{ item_parity }}"><t t-esc="item"/></li>
</t>
will be rendered as:
<li class="row even">1</li>
<li class="row odd">2</li>
<li class="row even">3</li>
<li class="row even">4</li>
t-att=mapping
if the parameter is a mapping similar to python dictionary, each key, value pair is considered as a new attribute and its value:
<div t-att="{'a': 1, 'b': 2}"/>
will be rendered as:
<div a="1" b="2"></div>
Python
t-field
A t-field attribute enables you to access and print the fields from the actual model or from a related model, for instance with the following element you can print the content of the name column (field) of the actual record:
<span t-if="o.name"
t-field="o.name" />
Javascript
t-jquery
You can take a CSS selector using the t-jquery directive. You can apply an operation on the extended template using the directive t-operation. We can use any of the operation modes listed below :
1. Append
2. prepend
3. before
4. after
5. inner
6. replace
Debugging
The javascript implementation of Qweb, provisions you with many debugging options.
t-log
the t-log directive takes an expression parameter & evaluates its runtime and renders the result to the console, similar to console.log.
<t t-set="nice" t-value="420"/>
<t t-log="nice"/>
The code will print 420 in the console
t-debug
During template rendering, it triggers a debugger breakpoint.
One can create breakpoints for easier debugging during the template rendering process.
<t t-if="d_debug_test">
<t t-debug="">
</t>
Note: t-debug is intensely reliant on the browser and its development tools.
t-js
The parameter used in the t-js directive is the context parameter; it is the name of the rendering context available in the body of the javascript code that you want to execute at the time of the template rendering.
<t t-set="nice" t-value="420"/>
<t t-js="ctx">
console.log("nice", ctx.foo);
</t>
The code will print 420 to the console.