第九章 QWeb模板

OWL中的QWeb模板与经典WC技术中的QWeb模板有所改进，本章将介绍OWL中QWeb模板的使用。

定义QWeb模板

OWL中的QWeb模板的定义方式与跟经典WC保持一致，都是使用t-name标签来定义一个模板：

<templates>
    <t t-name="template-name">
        <!-- template code -->
    </t>
</templates>

t-name可以随意命名，但是需要注意在整个系统中保持唯一。通常的命名方式采用"模块名.模板名"的形式。

QWeb基础语法

数据输出 t-out

t-out会自动转义HTML代码，可以降低用户自定义内容输出时跨域攻击的风险。

<p><t t-out="value"/></p>

会被渲染成

<p>42</p>

t-output可以使用公式来输出结果。

条件判断 t-if

QWeb中可以使用t-if标签来判断条件

<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>

循环 t-foreach

<p t-foreach="[1, 2, 3]" t-as="i">
    <t t-out="i"/>
</p>

在循环中，我们还可以使用以下属性辅助判断:

• i_all: 迭代的对象(过时)
• i_value: 迭代对象的值，一般情况下和i的值相同，但是当迭代字典时，i为key，i_value为字典的值
• i_index: 序列
• i_size: 迭代列表的长度
• i_first: 列表的第一个值
• i_last: 列表的最后一个值
• i_parity: 当前迭代的奇偶性
• i_even: 当前迭代是否为偶数
• i_odd: 当前迭代是否为奇数

属性 t-att

QWeb可以设置通过计算得出结果的属性，通过t-att来完成。t-att有如下三种形式的使用方法:

t-att-$name

<div t-att-a="42"/>

将转换成下面的数据:

<div a="42"></div>

t-attf-$name

与t-aff-$name使用方法类似，不同的是其结果是通过格式化的结果:

<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>

格式化输出过程中的两种方式 与 #{code}是等价的

t-att=mapping

另外，t-att还支持属性映射:

<div t-att="{'a': 1, 'b': 2}"/>

输出结果:

<div a="1" b="2"></div>

t-att=pair

元组模式的赋值：

<div t-att="['a', 'b']"/>

输出:

<div a="b"></div>

设置变量

QWeb中也可以设置自定义变量，方式是使用t-set标签

<t t-set="foo" t-value="2 + 1"/>
<t t-out="foo"/>

输出的结果是3

调用子模板

在QWeb模板也可以使用子模板:

<t t-call="other-template"/>

QWeb模板的继承

OWL中QWeb的继承方式与经典WC的继承方式有所不同，不再使用t-extend和t-query，而是使用t-inherit和t-inherit-mode来完成。

• t-inherit: 表明本模板继承自哪个模板
• t-inherit-mode: 继承的类型，有primary和extension两种方式，primary指本模板为通过继承父类模板而新创建的子模板，而extension则表示此模板用来继承修改父类模板。

<t t-name="child.template" t-inherit="base.template" t-inherit-mode="primary">
    <xpath expr="//ul" position="inside">
        <li>new element</li>
    </xpath>
</t>

primary方式继承的时候可以选填t-name来给子模板命名。

<t t-inherit="base.template" t-inherit-mode="extension">
    <xpath expr="//tr[1]" position="after">
        <tr><td>new cell</td></tr>
    </xpath>
</t>