qweb引擎

QWeb是一个基于xml的模板引擎，用于生成HTML片断和页面，模板指令是写在xml标签中的以t-开头的属性，好比t-if；若是要让一个标签不被渲染，能够采用t来包裹，这样会执行它里面的命令可是不产生任何输出。

一、template建立一个视图，包含如下属性：

• id -- 视图的id，惟一标识
• name, inherit_id, priority 与ir.ui.view的一致
• primary -- 设置为True并与inherit_id一块儿使用时，设置为主视图
• groups -- 以逗号分隔的分组id
• page -- 设置为True时，该页面为网页
• optional -- enabled 或 disabled，在用户界面中是否能够被禁用，默认是能够禁用

二、数据输出 t-esc

<p>
    <t t-esc="value"/>
</p>
#当value值为我是谁时输出结果：
<p>我是谁</p>

在某些状况下，若是源数据的安全，t-raw能够用来渲染字段原值，没有任何转码

三、条件语句

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

 

四、循环语句

<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 - 当前项目索引是否为偶数

五、属性

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>

六、设置变量

 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>

七、调用其余模板

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

 八、js指令

8.一、定义模板

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

8.二、继承模板

模板继承是用来修改已存在的模板，即给在其余模块定义的模板添加内容。经过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