QWeb是一个基于xml的模板引擎,用于生成HTML片段和页面,模板指令是写在xml标签中的以t-开头的属性,比如t-if;如果要让一个标签不被渲染,可以采用t来包裹,这样会执行它里面的命令但是不产生任何输出。
1、template创建一个视图,包含以下属性:
- id -- 视图的id,唯一标识
- name, inherit_id, priority 与ir.ui.view的一致
- primary -- 设置为True并与inherit_id一起使用时,设置为主视图
- groups -- 以逗号分隔的分组id
- page -- 设置为True时,该页面为网页
- optional -- enabled 或 disabled,在用户界面中是否可以被禁用,默认是可以禁用
2、数据输出 t-esc
<p> <t t-esc="value"/> </p> #当value值为我是谁时输出结果: <p>我是谁</p>
在某些情况下,如果源数据的安全,t-raw可以用来渲染字段原值,没有任何转码
3、条件语句
<div> <t t-if="condition"> <p>ok</p> </t> </div> #当condition是true的时候解析成: <div> <p>ok</p> </div> #condition为false的时候解析成 <div></div> #也可用下面的方法实现一样的功能 <div> <p t-if="condition">ok</p> </div> t-elif和t-else可以创建分支 <div> <p t-if="user.name=='admin'">您是网站管理员</p> <p t-elif="user.name=='customer'">您是网站用户</p> <p t-else>您现在是游客身份</p> </div>
4、循环语句
<t t-foreach="[1, 2, 3]" t-as="i"> <p><t t-esc="i"/></p> </t> #上述语句输出: <p>1</p> <p>2</p> <p>3</p> #也可用下面的方法实现一样的功能 <p t-foreach="[1, 2, 3]" t-as="i"> <t t-esc="i"/> </p>
foreach可用于数组(当前项目即是值)、映射表(当前项目是key)、整形数字(相当于0-X的数组)
* $as_all - 被循环的对象
* $as_value - 当前循环的值,当处理列表和数字时与 `$as`是一样的,当处理映射表时它代表值,而`$as`代表的是键
* $as_index - 当前循环索引,第0开始计算
* $as_size - 被循环对象的大小
* $as_first - 当前项目是否是第一个,相当于$as_index == 0
* $as_last - 当前项目是否是最后一个,相当于$as_index + 1 == $as_size
* $as_parity - 当前项目是奇数个还是偶数
* $as_even - 当前项目索引是否为奇数
* $as_odd - 当前项目索引是否为偶数
5、属性
qweb可以对属性进行实时计算并在输出时设置,通过t-attr来实现
1)、t-att-$name 可以创建一个名为$name的属性,原属性的值会被解析为新生成的属性的值 <div t-att-a="wrapper"/> #输出 <div a="wrapper"></div> 2)、参数是映射表,则每个键值对生成一个属性 <div t-att="{'a': 1, 'b': 2}"/> #输出 <div a="1" b="2"></div> 3)、如果参数是元组或2个元素的数组,那么第一个项就作为属性名,第二个作为属性值 <div t-att="['a', 'b']"/> #输出 <div a="b"></div> 4)、t-attf-$name 用于混合,有字符串也有变量,变量用{{}} <t t-foreach="[1, 2, 3]" t-as="item"> <li t-attf-class="row {{ item_parity }}"> <t t-esc="item"/> </li> </t> #输出 <li class="row even">1</li> <li class="row odd">2</li> <li class="row even">3</li>
6、设置变量
1)、设置变量 t-set t-value <t t-set="new_variable" t-value="True" /> 设置了变量 new_variable 的值 为 True 2)、t-value 也可以是表达 <t t-set="foo" t-value="2+1" > 设置了变量foo值为3 3)、t-value可以是一段html <t t-set="foo"> <li>ok</li> </t> 设置了变量foo 为 <li>ok</li>
7、调用其他模板
<template id="other-template"> <p> <t t-value='var'></t> </p> </template> <template id="this-template"> <t t-set="var" t-value="1"/> <t t-call="other-template"/> </template> #输出 <p>1</p> 这个有一个问题,在t-call外其他位置会可见。在t-call内设置的内容会在调用子模板时先执行并更新到当前环境 <template id="this-template"> <t t-call="other-template"> <t t-set="var" t-value="1"/> </t> </template> t-call内包含的内容可以通过一个0的魔术变量来传递给被调用的模板 <template id="other-template"> This template was called with content: <t t-raw="0"/> </template> <template id="this-template"> <div> <t t-call="other-template"> <em>content</em> </t> </div> </template> #输出 <div> This template was called with content: <em>content</em> </div>
8、js指令
8.1、定义模板
<templates> <t t-name="template-name"> <!-- template code --> </t> </templates>
8.2、继承模板
模板继承是用来修改已存在的模板,即给在其他模块定义的模板添加内容。通过t-extend
来表示,它的值是被继承的模板名,通过t-jquery来进行修改。
<t t-extend="base.template"> <t t-jquery="ul" t-operation="append"> <li>new element</li> </t> </t>
t-jquery是一个css选择器,用于选择需要改变的节点,并通过t-operation指定需要进行的操作
- append - 新节点的内容添加到原节点的后面(最后一个子节点后)
- prepend - 新节点内容添加到原节点前面(第一个子节点前)
- before - 新节点内容添加到原节点前
- after - 新节点内容添加到原节点后
- inner - 新节点内容替换原节点的子节点replace - 新节点内容直接替换原节点
- 如果没有指定operation,那么模板内容会被解析成javascript节点,并将context节点设置为this