qweb引擎


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM