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