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