Qweb is an XML templating engine of Odoo 13 which is used to generate reports and more template related operations. You can refer the basic Qweb operations from here
Attributes
Attributes are used to do some operations during the process of Qweb rendering in the runtime and the output will execute on the output node. This operation is done by t-att directive. It has three various structures:
t-att-$name
Qweb will create an attribute called $name and the value is evaluated after creation. Then the output will store to the attribute.
For Example:
<div t-att-foo="51"/>
will be rendered as:
<div foo="51"></div>
t-attf-$name
t-attf-$name is slightly different from t-att-$name. If the former is an expression then the parameter t-attf-$name will be a format string that is commonly used for defining classes.
Example:
<t t-foreach="[1, 2, 3, 4]" t-as="index">
<li t-attf-class="row {{ item_parity }}"><t t-esc="index"/></li>
</t>
will be generated 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
mapping is almost the same as the python dictionary. The parameter is set to mapping then each there will be a pair of keys and values which is considered as a new attribute and it’s value.
<div t-att="{'para1': val1, 'para2': val2}"/>
will be generated as:
<div para="val1" para2="val2"></div>
Python
T-field
t-field attribute will allow you to get or print the value from the fields which are associated with a model or a related model. For example, the following element will print the value contained in the field name which is in the record object ‘o’
<span t-if="o.name"
t-field="o.name" />
Javascript
t-jquery
If you want to use CSS in your template then you can use t-jquery for getting CSS selector. Using a t-operation directive you can also apply operation in the extended template. We have the following list of operation modes:
1. before
2. replace
3. append
4. inner
5. after
6. prepend
Debugging
There are many debugging options available for the javascript implementation of qweb.
t-log
The usage of the t-log is similar to the console.log operation. It will evaluate and render at the runtime with taking any expression parameters.
<t t-set="cool" t-value="365"/>
<t t-log="cool"/>
The code will print 365 in the console
t-debug
t-debug is helpful to create a debugger breakpoint. At the time of the rendering process, it will trigger the breakpoint.
<t t-if="debug_test_a">
<t t-debug="">
</t>
Note: t-debug is intensely reliant on the browser and its development tools.
t-js
t-js is a context parameter. Using this -js parameter, you will get the rendering context in the runtime of template rendering which is available in the javascript code.
<t t-set="cool" t-value="365"/>
<t t-js="ctx">
console.log("cool", ctx.foo);
</t>
The code will print 420 to the console.