QWeb是一個基于xml的模板引擎悄窃，用于生成HTML片段和頁面讥电，模板指令是寫在xml標(biāo)簽中的以t-開頭的屬性，比如t-if
如果要讓一個標(biāo)簽不被渲染轧抗，可以采用t來包裹恩敌，這樣會執(zhí)行它里面的命令但是不產(chǎn)生任何輸出

<t t-if="condition">
    <p>Test</p>
</t>
#condtition為true時上述代碼會輸出：<p>Test</p>

<div t-if="condition">
    <p>Test</p>
</div>

#condtition為true時上述代碼會輸出：
<div>
    <p>Test</p>
</div>

數(shù)據(jù)輸出

Qweb有一個自動過濾xss和html的輸出命令esc，它接受一個表達式横媚，解析變輸出結(jié)果：

<p><t t-esc="value"/></p>
#當(dāng)value值為42時輸出結(jié)果：
<p>42</p>

還有一個raw參數(shù)與esc類似纠炮，但不過濾html，用于顯示處理好的html內(nèi)容

條件語句

qweb有一個if條件判斷指令灯蝴，會自動解析其對應(yīng)的屬性值里的表達式：

<div>
    <t t-if="condition">
        <p>ok</p>
    </t>
</div>

#當(dāng)condition是true的時候解析成：
<div>
    <p>ok</p>
</div>

#condition為false的時候解析成
<div>
</div>

#也可用下面的方法實現(xiàn)一樣的功能
<div>
    <p t-if="condition">ok</p>
</div>

另外恢口，t-elif和t-else可用于添加條件分支

<div>
    <p t-if="user.birthday == today()">Happy bithday!</p>
    <p t-elif="user.login == 'root'">Welcome master!</p>
    <p t-else="">Welcome!</p>
</div>

循環(huán)

Qweb有一個指令用于循環(huán)處理，t-foreach用來指定需要循環(huán)處理的數(shù)據(jù)穷躁，t-as提供的是在后面用于代表當(dāng)前項目的變量名：

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

#也可用下面的方法實現(xiàn)一樣的功能
<p t-foreach="[1, 2, 3]" t-as="i">
    <t t-esc="i"/>
</p>

foreach可用于數(shù)組（當(dāng)前項目即是值）耕肩、映射表（當(dāng)前項目是key）、整形數(shù)字（相當(dāng)于0-X的數(shù)組）

* $as_all - 被循環(huán)的對象
* `$as_value` - 當(dāng)前循環(huán)的值问潭，當(dāng)處理列表和數(shù)字時與 `$as`是一樣的猿诸，當(dāng)處理映射表時它代表值，而`$as`代表的是鍵
* $as_index - 當(dāng)前循環(huán)索引狡忙，第0開始計算
* $as_size  - 被循環(huán)對象的大小
* $as_first - 當(dāng)前項目是否是第一個梳虽，相當(dāng)于$as_index == 0
* $as_last - 當(dāng)前項目是否是最后一個，相當(dāng)于$as_index + 1 == $as_size
* $as_parity - 當(dāng)前項目是奇數(shù)個還是偶數(shù)
* $as_even - 當(dāng)前項目索引是否為奇數(shù)
* $as_odd - 當(dāng)前項目索引是否為偶數(shù)

上述參數(shù)只在foreach里面可用去枷，但可在循環(huán)的最后復(fù)制到全局環(huán)境中

<t t-set="existing_variable" t-value="False"/>
<!-- existing_variable now False -->

<p t-foreach="[1, 2, 3]" t-as="i">
    <t t-set="existing_variable" t-value="True"/>
    <t t-set="new_variable" t-value="True"/>
    <!-- existing_variable and new_variable now True -->
</p>

<!-- existing_variable always True -->
<!-- new_variable undefined -->

屬性

qweb可以對屬性進行實時計算并在輸出時設(shè)置怖辆，通過t-attr來實現(xiàn)，有三種形式：

• t-att-$name 可以創(chuàng)建一個名為$name的屬性删顶，原屬性的值會被解析為新生成的屬性的值

<div t-att-a="42"/>  
#輸出
<div a="42"></div>

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

• t-att=mapping 如果參數(shù)是映射表逗余，每個鍵值對會生成一個屬性：

<div t-att="{'a': 1, 'b': 2}"/>
#輸出
<div a="1" b="2"></div>

• t-att=pair 如果參數(shù)是元組或2個元素的數(shù)組特咆，那么第一個項就作為屬性名，第二個作為屬性值

<div t-att="['a', 'b']"/>
#輸出
<div a="b"></div>

設(shè)置變量

qweb允許在模板內(nèi)設(shè)置變量（用于記住一個計算結(jié)果录粱、或為數(shù)據(jù)定義一個更明確的名字）
使用t-set來實現(xiàn)腻格，它的值就是設(shè)置的變量名

• t-value屬性是一個表達式，解析后的值作為新變量的值

<t t-set="foo" t-value="2 + 1"/>
<t t-esc="foo"/>
#輸出3

• 如果沒有t-value啥繁，節(jié)點的內(nèi)容會被渲染被設(shè)置成變量的值

<t t-set="foo">
    <li>ok</li>
</t>
<t t-esc="foo"/>
#輸出結(jié)果
&lt;li&gt;ok&lt;/li&gt;

#內(nèi)容被esc自動輸義了

調(diào)用子模板

qweb可以用于最高級別的渲染菜职，但也可以通過t-call來包含其他模板
<t t-call="other-template"/>會調(diào)用指定名字的模板
如果other-template是<p><t t-value="var"/></p> 得到的結(jié)果會是<p/>

<t t-set="var" t-value="1"/>
<t t-call="other-template"/>

#會輸出
<p>1</p>

這個有一個問題，在t-call外其他位置會可見旗闽。在t-call內(nèi)設(shè)置的內(nèi)容會在調(diào)用子模板時先執(zhí)行并更新到當(dāng)前環(huán)境

<t t-call="other-template">
    <t t-set="var" t-value="1"/>
</t>

t-call內(nèi)包含的內(nèi)容可以通過一個0的魔術(shù)變量來傳遞給被調(diào)用的模板：

#other-template
<div>
    This template was called with content:
    <t t-raw="0"/>
</div>

#main
<t t-call="other-template">
    <em>content</em>
</t>

#output
<div>
    This template was called with content:
    <em>content</em>
</div>

Python

專用指令：

自動格式化記錄

• t-field只能用于格式化記錄字段（從browe函數(shù)獲取到的）酬核，可以根據(jù)字段類型自動匹配格式蜜另；
• t-options只能用于自定義字段，最常用的是widget嫡意，其他的選項都是field-xx或widget-xx

調(diào)試器（t-debug）

通過PDB 的set_trace 來進行調(diào)試举瑰，接收的參數(shù)需要是模塊名字，set_trace()會在該模塊上調(diào)用
<t t-debug="pdb"/>相當(dāng)于：importlib.import_module("pdb").set_trace()

Helpers

基于請求的Helper

python端一般是在controller里使用qweb蔬螟，這樣可以直接調(diào)用odoo.http.HttpRequest.render()來渲染保存在數(shù)據(jù)庫中的模板

response = http.request.render('my-template', {
    'context_value': 42
})
#會直接從controller里返回一個響應(yīng)對象

基于視圖的Helper

比上面的更深層次的helper是在ir.ui.view:中的render方法

• render(cr, uid, id[, values][, engine='ir.qweb][, context])
  通過view的數(shù)據(jù)庫id來渲染一個qweb視圖模板此迅，模板在ir.ui.view記錄會自動加載，它會為渲染環(huán)境設(shè)置一系列默認值
• request - 當(dāng)前WebRequest對象
• debug - 當(dāng)前請求是否是debug模式
• quote_plus - 是否進行url encode轉(zhuǎn)義
• json - 相關(guān)的標(biāo)準(zhǔn)庫
• time - 相關(guān)的標(biāo)準(zhǔn)庫
• datetime - 相關(guān)的標(biāo)準(zhǔn)庫
• relativedelta - model的時間處理屬性
• keep_query - 一個keep_query函數(shù)旧巾，參數(shù)1：values-傳遞給qweb的上下文環(huán)境耸序，參數(shù)2：engine (str) 用于qweb渲染的odoo模型名

API

可以直接使用ir.qweb模型來繼承、擴展他的功能

Javascript

專用指令

• 定義模板
  t-name只能放在模板文件的最外面菠齿，離template標(biāo)簽最近的地方

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

它沒有其他參數(shù)佑吝，但可以使用一個t標(biāo)簽，當(dāng)使用t標(biāo)簽時它需要有單個子元素绳匀，模板名可以隨便取芋忿，一般會用.分隔來表示繼承關(guān)系

• 模板繼承
  模板繼承是用來修改已存在的模板，即給在其他模塊定義的模板添加內(nèi)容疾棵。通過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選擇器是尔，用于選擇需要改變的節(jié)點殉了，并通過t-operation指定需要進行的操作

• append - 新節(jié)點的內(nèi)容添加到原節(jié)點的后面（最后一個子節(jié)點后）
• prepend - 新節(jié)點內(nèi)容添加到原節(jié)點前面（第一個子節(jié)點前）
• before - 新節(jié)點內(nèi)容添加到原節(jié)點前
• after - 新節(jié)點內(nèi)容添加到原節(jié)點后
• inner - 新節(jié)點內(nèi)容替換原節(jié)點的子節(jié)點
• replace - 新節(jié)點內(nèi)容直接替換原節(jié)點
  如果沒有指定operation，那么模板內(nèi)容會被解析成javascript節(jié)點拟枚，并將context節(jié)點設(shè)置為this

調(diào)試

qweb的javascript提供多種調(diào)試工具

t-log

接收一個表達式參數(shù)薪铜，在渲染時解析并將結(jié)果輸出到控制臺

<t t-set="foo" t-value="42"/>
<t t-log="foo"/>
#在控制臺輸出42

t-debug

在渲染時觸發(fā)一個調(diào)試斷點

<t t-if="a_test">
    <t t-debug="">
</t>

t-js

該節(jié)點內(nèi)容里的javascript代碼會在渲染時執(zhí)行，接收一個context參數(shù)恩溅，將當(dāng)前的環(huán)境傳給js

<t t-set="foo" t-value="42"/>
<t t-js="ctx">
    console.log("Foo is", ctx.foo);
</t>

Helpers

core.qweb(core是web.core模塊):一個 QWeb2.Engine()實例隔箍，在這個實例中所有模塊相關(guān)模板文件全部有加載，而且可使用_(underscore方法), _t(翻譯方法) 和 JSON
core.qweb.render 可以用于渲染基本模塊的模板

API

class QWeb2.Engine()

QWeb渲染器脚乡，處理qweb的大部分邏輯如加載蜒滩、解析、編譯奶稠、渲染
odoo在core模塊中將user實例化俯艰，并輸出到core.qweb，同時將所有模板文件加載到qweb實例中
一個 QWeb2.Engine()同時也可以當(dāng)成一個命名空間來看待

• QWeb2.Engine.render(template[, context])
  將一個模板渲染成字符串锌订，使用context來查找渲染時所遇到的變量

參數(shù)：1.template (String) - 需要渲染的模板名
2.context (Object) - 渲染時需要用到的命名空間

QWeb2.Engine.add_template(templates)

這個方法在某些情況下比較有用竹握，用于自己定義一個命名空間并獲得單獨的 QWeb2.Engine()實例，這樣不要擔(dān)心與其他模塊沖突辆飘。

該方法加載指定的模板啦辐，參數(shù)可以是以下幾種：
1.XML字符串 -- Qweb會將它解析成xml文檔并加載
2.URL -- Qweb會下載對應(yīng)的url內(nèi)容污秆，并加載獲得的xml字符串
3.Document 或 Node -- qweb會將所有第一級的子節(jié)點過濾一遍，并加載命名為template或從template繼承的部分

QWeb2.Engine.prefix

在解析的時候用來識別指令的前綴昧甘，默認是t

QWeb2.Engine.debug

布爾型標(biāo)志表示引擎是否使用調(diào)試模式，默認情況下战得，qweb會把模板執(zhí)行過程中產(chǎn)生的錯誤攔截充边，在調(diào)試模式下，所有異常都會被保留

QWeb2.Engine.jQuery

在模板繼承處理時所使用的jQuery實例常侦，默認是window.jQuery

QWeb2.Engine.preprocess_node

一個方法浇冰，當(dāng)它出現(xiàn)時會在編譯dom節(jié)點和template節(jié)點前調(diào)用，一般用于自動模板中的翻譯文本內(nèi)容或?qū)傩粤觯J是null

譯自odoo官方文檔：http://www.odoo.com/documentation/10.0/reference/qweb.html 肘习，不當(dāng)之處歡迎批評指正。

內(nèi)容發(fā)布自http://www.reibang.com/u/6fdae8ec06bc坡倔，轉(zhuǎn)載請注明出處