文章目录
定义
- QWeb是odoo的XML模板引擎,主要用于生成HTML页面
- 模板指令是带有t-前缀的XML属性,如t-if
<t t-if="condition">
<p>Test</p>
</t>
数据输出
- 输出指令:out,将自动对其输入进行HTML转义
- 接受一个表达式,进行求值并将结果注入到文档中
<p>
<t t-out="value"/>
</p>
2.1 if 条件
2.1.1 t-if指令
- QWeb有一个条件指令if,它计算作为属性值给出的表达式
<div>
<t t-if="condition">
<p>ok</p>
</t>
</div>
如果条件"condition"为真,则渲染出p属性,反之不渲染
2.1.2 t-elif 、t-else指令
另外的条件分支指令t-elif和t-else使用如下:
<div>
<p t-if="user.birthday == today()">Happy birthday!</p>
<p t-elif="user.login == 'root'">Welcome master!</p>
<p t-else="">Welcome!</p>
</div>
2.2 Loops 循环
QWeb有一个迭代指令foreach,它接受一个返回要迭代的集合的表达式,第二个参数t-as提供迭代的“当前项”的名称
<t t-foreach="[1, 2, 3]" t-as="i">
<p><t t-out="i"/></p>
</t>
结果:
<p>1</p>
<p>2</p>
<p>3</p>
2.3 Attributes 属性
QWeb可以动态地计算属性,并在输出节点上设置计算结果。
这是通过t-att(属性)指令完成的,它以3种不同的形式存在:
2.3.1 t-att-$name
创建一个名为$name的属性,计算属性值,并将结果设置为属性值
<div t-att-a="42"/>
呈现如下
<div a="42"></div>
2.3.2 t-attf-$name
与前面相同,但参数是一个格式字符串而不仅仅是一个表达式,通常用于混合文字和非文字字符串(例如classes)
<t t-foreach="[1, 2, 3]" t-as="item">
<li t-attf-class="row {
{ (item_index % 2 === 0) ? 'even' : 'odd' }}">
<t t-out="item"/>
</li>
</t>
呈现如下
<li class="row even">1</li>
<li class="row odd">2</li>
<li class="row even">3</li>
2.3.3 t-attf=mapping
如果参数是一个映射,则每个(键、值)对都会生成一个新的属性及其值
<div t-att="{'a': 1, 'b': 2}"/>
呈现如下
<div a="1" b="2"></div>
2.3.4 t-attf=pair
如果参数是一对(包含2个元素的元组或数组),则对的第一项是属性的名称,第二项是值
<div t-att="['a', 'b']"/>
呈现如下
<div a="b"></div>
2.4 环境变量
QWeb允许从模板中创建变量,以记忆计算(多次使用),为数据块提供更清晰的名称
这是通过set指令完成的,该指令接受要创建的变量的名称。可以通过两种方式提供要设置的值
- 包含表达式的t值属性及其计算结果将被设置
结果:<t t-set="foo" t-value="2 + 1"/> <t t-out="foo"/>
3
- 如果没有t-value属性,则呈现节点的主体并将其设置为变量的值
结果:<t t-set="foo"> <li>ok</li> </t> <t t-out="foo"/>
<li>ok</li>
2.5 调用sub-templates
QWeb模板可用于顶级呈现,但也可以使用t-call指令从另一个模板中使用它们(以避免重复或为模板的部分命名)
<t t-call="other-template"/>
2.6 其它
2.6.1 t-js
t-js 节点的主体是在模板渲染期间执行的javascript代码。 带有一个上下文参数,该名称是渲染上下文在t-js主体中可用的名称
<t t-set="foo" t-value="42"/>
<t t-js="ctx">
console.log("Foo is", ctx.foo);
</t>
2.6.1 t-raw
和t-esc一样,也是输出值。但t-esc 过滤安全值,像html元素;t-raw是数据库中的原始数据。
还有一种用法,可直接在xml页面中的js直接赋值给变量,进行使用
var PieData = <t t-raw="pie_data"/>
pie_data是后台传递的参数