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