第十一章 Odoo 12開發之看板視圖和用戶端 QWeb

QWeb 是 Odoo 使用的模板引擎，它基於 XML 來生成 HTML 片斷和頁面。通過 QWeb可生成內容豐富的看板(Kankan)視圖、報表和 CMS 網頁。本文中我們將學習QWeb 語法以及如何使用 QWeb 來創建我們自己的看板視圖和自定義報表。

本文主要內容有：

• 看板是什么？
• 設計看板視圖
• QWeb 模板語言
• 看板視圖的繼承
• 添加自定義 CSS 和 JavaScript

 

開發准備

我們將繼續使用第十章 Odoo 12開發之后台視圖 – 設計用戶界面完成的library_checkout插件模塊。相應代碼請見 GitHub倉庫。本章完成后的代碼也請參見GitHub倉庫。

了解看板

Kanban 是一個日語詞匯，字面意思榜單，與精益制造和准時化生產相關聯，由豐田工業工程師大野耐一(Taiichi Ohno)引入。最近看板的概念應用於更多領域，並且隨着敏捷方法的施行在軟件工業內流行起來。

看板讓我們能夠可視化工作隊列，它以列來進行組織，每列代表工作進程的一個階段。工作項以放在看板對應列的卡片來表示。新的工作項從最左邊的列開始，並開始向右移動直至最右邊列，代表工作完成。

看板的簡單化或視覺效果讓其對簡單的業務流程有着優異的支持。一個基本的看板示例包含三列，如下圖所示：待辦、在辦和完成。當然它可以擴展為你需要的其它指定流程：

對許多業務用例，看板都是管理相應流程的更有效方式，與 Odoo 11之前的更重的工作流引擎形成鮮明對比。Odoo 在支持經典的列表和表單視圖的同時還支持看板視圖，這易於我們實施這種類型的視圖。下面就讓我們一起來學習如何使用看板視圖。

看板視圖

現在我們要為借閱模型添加一個看板視圖。每個借閱是一個卡片，看板將會被組織成階段列。在前面的文章中，我們已經添加了stage_id階段字段。

此前在表單視圖我們大部分時候使用 Odoo 獨有的 XML 元素，比如<field>和<group>，有時也會使用 HTML 元素，如<h1>或<div>，但用得較少。在看板視圖中則恰恰相反，展示模板基於 HTML，僅支持兩個 Odoo 獨有的元素：<field>和<button>。

最終呈現在網頁客戶端中的內容是由 QWeb 模板動態生成的。QWeb 引擎處理特殊的 XML 標簽和屬性來進行生成。這樣可以很好地控制如何渲染內容，但也讓視圖設計更為復雜。看板視圖設計靈活性很強，我們將盡力以直接易懂地方式介紹快速創建看板視圖的知識。查看與所需相似的看板視圖來獲取創意然后創建自己的看板是一種不錯的方法。

我們將學習兩種使用看板視圖的方式。一種是卡片列表，它用於聯系人、產品、雇員通訊錄或應用等。聯系人看板視圖長這樣：

但這不是真正的看板，看板應是一個組織成不同列的卡片，當然看板視圖也支持這種布局。可能過 CRM 或項目應用來查看示例。訪問CRM > Sales > My Pipeline可得到如下結果：

這兩種布局的最大區別是卡片按列的組織方式。這通過 Group By 功能實現，與列表視圖中相似。通常分組是通過stage字段實現。看板視圖的一個非常有用的功能是可以在列之間拖放卡片，自動分配分組視圖字段的對應值。從兩個示例中的卡片我們可以看到一些分別。其實它們的設計非常靈活，設計看板卡片不只有一種方式。這兩個示例為我們提供設計的一些基礎。

聯系人卡片基本組成有左側的圖像，主區域的加粗標題和緊隨其后的一系列值。CRM 管道卡片結構更為復雜些。卡片主區域也有一個標題以及相關信息緊隨其后，還有 footer 區。在該區域中，可看到左側有一個優先級組件，后面帶有一個活動指示，在右側是一個負責用戶的頭像。上圖中看不到，在鼠標懸停在右上角時還會有一個選項菜單。這個菜單讓我們可以修改卡片的顏色提示等。

我們將使用這種更復雜的結構來作為借閱看板卡片的參照。

設計看板視圖

我們將改進一直以來開發的library_checkout模型，為圖書借閱添加看板視圖。為此我們使用一個新文件library_checkout/views/checkout_kanban_view.xml。需要在__manifest__.py文件的 data 鍵最下方添加這個文件。在library_checkout/views/library_menu.xml文件中，可以看到借閱菜單項使用的窗口操作。需要對其修改來啟用本文中添加的視圖類型：

 

1 2 3 4

<act_window id="action_library_checkout"         name="Checkouts"         res_model="library.checkout"         view_mode="kanban,tree,form,activity,calendar,graph,pivot" />

這里我們修改了菜單操作來在view_mode列表的最前面添加了kanban，來讓它成為默認的視圖模式。然后我們來添加kanban視圖記錄。與其它視圖基本相同，除了 arch 字段內，最外層 XML元素為<kanban>。下一步創建實際使用的 XML 文件library_checkout/views/checkout_kanban_view.xml來放置這個驚艷的看板視圖：

 

1 2 3 4 5 6 7 8 9 10 11

<?xml version="1.0"?> <odoo>     <record id="library_checkout_kanban" model="ir.ui.view">         <field name="model">library.checkout</field>         <field name="arch" type="xml">             <kanban>               </kanban>         </field>     </record> </odoo>

在使用看板視圖前，我們需要為圖書借閱模型添加幾個字段。

優先級、看板狀態和顏色

除階段外，看板中還有一些常用和有用的字段：

• priority讓用戶組織他們的工作項，標記什么應優先處理
• kanban_state標記是否應移向下一階段或因某種原因原地不動。在模型定義層中兩者都是選擇項字段。在視圖層，對它們有特別的組件用於表單和看板視圖。
• color用於存儲看板卡片顯示的顏色，並可通過看板視圖中的顏色拾取器菜單設置

編輯library_checkout/models/library_checkout.py文件來在我們的模型中添加這些字段：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

class Checkout(models.Model): ...     priority = fields.Selection(         [('0', 'Low'),         ('1', 'Normal'),         ('2', 'High')],         'Priority',         default='1')     kanban_state = fields.Selection(         [('normal', 'In Progress'),         ('blocked', 'Blocked'),         ('done', 'Ready for next stage')],         'Kanban State',         default='normal')

我們還應該在表單視圖中添加這些字段，使用各自的特別組件。kanban_state字段就加在<div class=”oe_title”>之前並在按鈕框之后：<field name=”kanban_state” widget=”state_selection” />。priority應添加在name 字段之前，包裹在<h1>元素中：<field name=”priority” widget=”priority” />。color字段一般不出現在表單視圖中。

既然借閱模型已有我們所需使用的所有字段，我們可以來寫看板視圖了。

看板卡片元素

看板視圖框架包含一個<kanban>外層元素和以下基礎結構：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<kanban default_group_by="stage_id" class="o_kanban_small_column">                 <!-- Fields -->                 <field name="stage_id" />                 <field name="id" />                 <field name="color" />                 <field name="kanban_state" />                 <field name="priority" />                 <field name="message_partner_ids" />                   <!-- Optional progress bar -->                 <progressbar                     field="kanban_state"                     colors='{"done": "success", "blocked": "danger"}' />                 <!-- Templates with HTML snippets to use -->                 <templates>                     <t t-name="kanban-box">                         <!-- HTML Qweb template -->                     </t>                 </template>             </kanban>

注意在元素中使用了default_group_by=”stage_id”屬性，我們用它來讓看板默認以 stage 分組，這也是看板通常的分組方式。在簡單卡片列表的看板中，如聯系人，我們不需要添加該屬性，只需使用<kanban>標簽即可。<kanban>元素支持以下屬性：

 

• default_group_by設置默認列分組使用的字段
• default_order設置看板項默認使用的排序
•  quick_create=”false”禁用了每列頂部的快速創建選項（大的加號符號），快速創建只需提供標題描述即可創建新項。false是 JavaScript 的語法，必須是小寫字母。
• class為渲染看板視圖的根元素添加 CSS 類。相關類是_kanban_small_column，讓列比默認的更加緊湊。其它類可由我們模塊的 CSS 文件來進行提供。
•  group_create, group_edit, group_delete和quick_create_view可設置為 false 來禁用看板列上對應的操作。如group_create=”false”刪除右側添加新列的按鈕。
• on_create用於創建用戶點擊左上角 Create 按鈕時彈出的自定義簡單表單視圖窗口。應為相應的表單視圖添加<module>.<xml_id>值。

然后我們的模板中使用了一組字段。確切地說，只有在 QWeb 表達式中明確使用的字段才需要在這里聲明，用以保證從服務端抓取它們的數據。QWeb引擎在處理模板前，僅會在視圖中查找 <field name=”…”>來從模型中獲取數據。QWeb的屬性通常使用不會被檢測到的record.field引用方式。正因為如此，需在<templates>之前包含這些字段來讓模板處理時有相應字段值可以使用。

ℹ️Odoo 11中的修改
引入了進度條組件。使用的時候在看板列的上方會出現一個顏色條，來提供該列各項的狀態數據。在本文前面CRM Pipeline的示例圖中可以查看。

<progressbar>有如下屬性：

• field是對列中各項進行顏色分組的字段名
• colors是一個字典，將分組字段值與以下三種顏色分別進行映射：danger (紅色), warning (黃色)或success (綠色)。
• sum_field是一個可選項，用於選取整列匯總的字段名。如未設置，會使用各項的計數值。

然后我們的<templates>元素包含一個或多個QWeb模板來生成要使用的 HTML 片斷。必須要有一個名為kanban-box的模板，它渲染看板卡片。還可以添加其它模板，通常用於定義主模板中復用到的 HTML 片斷。這些模板使用標准的 HTML 和 QWeb 模板語言。QWeb提供了一些特殊指令，用於處理動態生成最終展示的 HTML。

ℹ️Odoo 12中的修改
Odoo 現在使用 Twitter Bootstrap 4，此前版本中使用Bootstrap 3。這些樣式在渲染 HTML 的地方通常都可使用，有關Bootstrap更多知識請見官方網站。

下面就來詳細了解看板視圖中所使用的QWeb模板設計。

看板卡片布局

看板卡片主內容區域在kanban-box模板內定義。這個內容區也可以有一個 footer 底部子容器。卡片右上角還可以添加按鈕，點擊后打開操作菜單的功能。對於footer區域，應在看板盒子模型底部使用<div>並添加oe_kanban_bottom CSS 類。還可以通過oe_kanban_bottom_left和oe_kanban_bottom_right CSS 類進一步分割為左、右 footer 區。此外，可通過Bootstrap的pull-left和pull-right類在卡片的任意位置（包括oe_kanban_bottom底部區域）添加向左或向右對齊元素。

以下是對看板卡片中QWeb模板的第一次迭代：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<t t-name="kanban-box">                         <!-- Set the Kanban Card color -->                         <div t-attf-class="                             oe_kanban_color_#{kanban_getcolor(record.color.raw_value)}                             oe_kanban_global_click">                             <div class="o_dropdown_kanban dropdown">                                 <!-- Top-right drop down menu here... -->                             </div>                             <div class="oe_kanban_body">                                 <!-- Content elements and fields go here... -->                             </div>                             <div class="oe_kanban_footer">                                 <div class="oe_kanban_footer_left">                                     <!-- Left hand footer... -->                                 </div>                                 <div class="oe_kanban_footer_right">                                     <!-- Right hand footer... -->                                 </div>                             </div>                             <div class="oe_clear" />                         </div>                     </t>

這就是看板卡片的整體結構。你可能注意到了在頂部<div>元素中使用了color字段來動態設置卡片顏色。在后面的部分中我們會講解t-attf QWeb指令的細節。現在來為主內容區域添加內容：

 

1 2 3 4 5 6 7 8 9 10 11

<div class="oe_kanban_body">                                 <div>                                     <strong>                                         <a type="open"><field name="member_id" /></a>                                     </strong>                                 </div>                                 <ul>                                     <li><field name="user_id" /></li>                                     <li><field name="request_date" /></li>                                 </ul>                             </div>

這個模板中大部分都是常規 HTML，但也有渲染字段值的<field>元素和在常規表單視圖按鈕中使用的 type 屬性，此處用在錨文本標簽中。

 

在左部 footer 中插入優先級組件：

 

1 2 3 4 5 6 7

<div class="o_kanban_record_bottom">                                 <div class="oe_kanban_bottom_left">                                     <field name="priority" widget="priority" />                                     <field name="activity_ids" widget="kanban_activity" />                                 </div> ...                             </div>

這里像我們在表單視圖中做的那樣添加了priority字段。還添加了一個計划活動的字段，使用kanban_activity特殊組件來顯示即將開始活動的指示。

在右部footer中，放入看板狀態組件和請求借閱的會員頭像：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class="oe_kanban_bottom_right">                                     <field name="kanban_state"                                         widget="kanban_state_selection" />                                     <img t-att-src="kanban_image(                                             'library.checkout',                                             'member_image',                                             record.id.raw_value)"                                         t-att-title="record.member_id.value"                                         t-att-alt="record.member_id.value"                                         width="24"                                         height="24"                                         class="oe_kanban_avatar"                                     />                                 </div>

補充：原文件使用的 CSS 類oe_kanban_footer，oe_kanban_footer_left和oe_kanban_footer_right經測試不會進行左右對齊，參照 CRM 進行了如上修改

看板狀態通過<field>元素和kanban_state_selection組件來進行添加。用戶頭像使用 HTML <img>標簽插入。圖像內容使用QWeb t-att-命令動態生成，后面會詳細講解。這里使用了kanban_image()幫助函數來獲取src屬性的值。kanban_image() Javascript函數從 Odoo 模型中獲取表單並在網頁中渲染。有以下屬性：

• 獲取圖像的模型
• 包含圖像的字段
• 獲取的記錄 ID

為看板卡片添加選項菜單

看板卡片可在右上角帶有一個選項菜單。通常的操作有編輯或刪除記錄，但也可以為其添加和按鈕調用的同樣操作。還有一個設置卡片顏色的組件。以下是oe_kanban_content頂部添加的選項菜單的基礎代碼：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div class="o_dropdown_kanban dropdown">                                 <a class="dropdown-toggle btn"                                     data-toggle="dropdown" role="button"                                     aria-label="Dropdown menu"                                     title="Dropdown menu"                                     href="#">                                     <span class="fa fa-ellipsis-v" />                                 </a>                                 <div class="dropdown-menu" role="menu">                                     <!-- Edit and Delete actions, if available: -->                                     <t t-if="widget.editable">                                         <a role="menuitem" type="edit" class="dropdown-item">Edit</a>                                     </t>                                     <t t-if="widget.deletable">                                         <a role="menuitem" type="delete" class="dropdown-item">Delete</a>                                     </t>                                     <!-- Color picker option -->                                     <ul class="oe_kanban_colorpicker" data-field="color" />                                 </div>                             </div>

下拉菜單基本上是由帶有<a>標簽的<li> HTML 列表元素組成。Edit 和 Delete 這類選項需要滿足指定條件下才會出現。這通過QWeb的t-if命令來實現。本文后續會詳細講解QWeb的命令。widget全局變量表示一個KanbanRecord()  JS 對象，負責渲染當前看板卡片。有兩個非常有用的屬性：widget.editable和widget.deletable，讓我們可以檢查相應的操作是否可用。

可以看到如何根據記錄字段值來顯示或隱藏選項，Set as Done僅在未設置is_done 字段時才會顯示。最后一個選項添加顏色拾取器組件來使用 color 數據字段選擇或修改卡片背景色。因此，除<button>元素外，<a>也可用於運行Odoo 操作。

看板視圖中的操作

在QWeb模板中，用於超鏈的<a>標簽可帶有一個 type 屬性。它設置鏈接執行的操作類型，這樣鏈接和常規表單中的按鈕可進行同樣的操作。和表單視圖一樣，操作類型可以是action或object，並應帶有一個 name 屬性來標識所要執行的具體操作。此外，還有以下操作類型可以使用：

• open打開相應的表單視圖
• edit在編輯模式下直接打開相應的表單視圖
• delete刪除記錄並從看板視圖中刪除該項

QWeb 模板語言

QWeb會查找模板中的特殊指令並替換掉動態生成的 HTML。這些指令是 XML 元素屬性，可心用在<div>, <span>或<field>等有效標簽或元素中。有時我們要使用QWeb指令但不希望放在模板的 XML 元素中。對這種情況，可以使用能帶有 QWeb 指令（如t-if或t-foreach）的特殊元素<t>，該元組不會在最終產生的XML/HTML有任何輸出。

QWeb指令常使用運算的表達式來根據當前記錄值生成不同的結果。有兩種不同的QWeb實現：客戶端JavaScript和服務端Python。報表和網頁使用服務端QWeb的 Python 實現。看板視圖使用客戶端JavaScript實現。也就是說看板視圖中的QWeb表達式應使用JavaScript語法書寫，而不是 Python。

在顯示看板視圖時，內部的步驟大致如下：

1. 獲取模板的XML進行渲染
2. 調用服務端read()方法來獲取模板中所涉及的字段數據
3. 定位kanban-boxs模板並使用QWeb解析它來輸出最終的HTML片斷
4. 在瀏覽器顯示(DOM)中注入 HTML

以上在技術上並不精確，僅是用於理解看板視圖中如何運作的腦圖。下面我們將學習QWeb表達式運行並探討可用的QWeb指令，通過示例改進借閱看板卡片。

QWeb JavaScript 運行上下文

許多QWeb指令使用表達式的運行來生成結果。在看板視圖這類客戶端的應用中，表達式應使用JavaScript書寫。表達式在帶有幾個有用變量的上下文中進行運行。可用record 對象帶有從服務端請求的字段來表示當前記錄。字段值可通過raw_value或value屬性來獲取：

• raw_value是由服務端read()方法返回的值，因此在條件表達式中更適用
• value根據用戶設置來格式化，用於在用戶界面中的顯示。常用於date/datetime, float/monetary和關聯字段。

QWeb運行上下文還可在JavaScript網頁客戶端中引用。要擅用這些需要對網頁客戶端結構有很好的理解，但這里我們不會進行深入介紹。要進行引用 ，QWeb表達式運行中有以下標識符可以使用：

• widget是對當前KanbanRecord() 組件對象的引用 ，用於在看板卡片中渲染當前記錄。它會暴露一些幫助函數供我們使用。
• record是widget.record的簡寫形式，使用點號標記來提供對可用字段的訪問。
• read_only_mode表示當前視圖是否為讀模式（而非編輯模式）。它是widget.view.options.read_only_mode的簡寫形式。
• instance是對全部網頁客戶端實例的一個引用 。

值得一提的是有些字符是不能在表達式中使用的，比如小於號(<) 。這是因為在 XML 標准中，這些字符具有特殊含義，不應在 XML 內容中使用。反向的>=是一個有效替代方式，但通常是使用以下替代符號來進行不等式運算：

• lt是小於
• lte是小於等於
• gt是大於
• gte是大於等於

ℹ️前述的比較符號僅用於 Odoo，是引入來解決 XML 格式中的限制的。它們不是 XML 標准的一部分。

字符串替換動態屬性– t-attf

我們的看板卡片使用t-attf QWeb指令來為頂級<div>元素動態設置一個類，這樣卡片可根據 color 字段值來顯示顏色。為此使用了t-attf- QWeb指令。t-attf-指令使用字符串替換動態生成標簽屬性。這讓像 URL 地址或 CSS 類名這類較大字符串中的部分內容可動態生成。

該指令查找表達式代碼塊進行運行並替換結果。它們通過{{和}} 或#{和}來進行分隔。代碼塊的內容可以是任意JavaScript表達式並使用QWeb表達式中的任意可用變量，如record和widget。本例中我們還使用了專門提供的kanban_color() JS 函數，用於映射索引值到類顏色名。

作為一個更復雜的示例，我們使用這個指令來動態生成用戶的顏色，紅色字體表示優先級很高。下面替換看板卡片中的相應代碼：

 

1 2 3 4 5

<li t-attf-class="oe_kanban_text_{{                                         record.priority.raw_value lt '2'                                         ? 'black' : 'red'}}">                                         <field name="user_id" />                                     </li>

這將會根據借閱優先級的值生成class=”oe_kanban_text_red”或class=”oe_kanban_text_black”。請注意看板視圖中是有oe_kanban_text_red這個 CSS 類的，但oe_kanban_text_black僅用於演示，實際並不存在。

ℹ️注意JavaScript表達式中使用的lt符號，是<的轉義表達式，並不能在XML中使用。

表達式動態屬性 – t-att

t-att- QWeb指令通過運行表達式動態生成屬性值。我們的看板卡片中使用它來為<img>標簽動態生成屬性，title 屬性使用以下表達式動態渲染：

 

1	t-att-title="record.member_id.value"

.value字段返回在屏幕上顯示的值。對於many-to-one字段，這通常是相關記錄的 name 值。對於用戶則是用戶名。運行之后在鼠標懸停於圖像上時會顯示相應的用戶名。

在表達式運行的結果值為假時，就不會渲染該屬性。這對於特殊的 HTML 屬性非常重要，比如 input 字段中的 checked，即便在沒有屬性值時也會有顯示效果。

循環 – t-foreach

通過循環遍歷來重復同一 HTML 代碼塊。我們可使用它來添加記錄 follower 的頭像。讓我們先來僅渲染記錄的partner ID：

 

1 2 3

<t t-foreach="record.message_partner_ids.raw_value" t-as="rec">     <t t-esc="rec" />; </t>

t-foreach指令接收一個JavaScript表達式，運行來遍歷集合。在大多數情況下，這會是 一個to-many關聯字段的名稱。與t-as指令一同使用來設置用於引用遍歷各項的名稱。下面使用的t-esc指令運行所提供的表達式，本處僅為 rec 變量名，將其渲染為已轉譯的安全 HTML。

在上例中，我們遍歷了存儲在message_partner_ids 字段中的 follower。因為在看板卡片上的空間有限，我們使用JS 的slice()函數來限定所顯示的follower數量，如下所示：

 

1	t-foreach="record.message_partner_ids.raw_value.slice(0, 3)"

rec變量存儲每個遍歷值，本例中為partner ID。這樣我們可以將循環改寫為：

 

1 2 3 4

<t t-foreach="record.message_partner_ids.raw_value.slice(0,3)" t-as="rec">     <img t-att-src="kanban_image('res.partner', 'image_small', rec)"         class="oe_avatar" width="24" height="24" alt="" /> </t>

比如可將其添加在右側 footer 的用戶頭像旁。還包含一些幫助變量，它們的名稱以t_as 中定義的變量名為前綴。本例中使用了rec，因此可用的幫助變量如下：

• rec_index是迭代索引，從0開始
• rec_size是集合中的元素數量
• rec_first在迭代的第一個元素中為真
• rec_last在迭代的最后一個元素中為真
• rec_even在索引為偶數時為真
• rec_odd在索引為奇數時為真
• rec_parity根據當前索引為odd或even
• rec_all表示進行迭代的對象
• rec_value在迭代{key:value} 字典時，存儲value (rec存儲鍵名)

例如可通過如下代碼去除ID 列表最后逗號：

 

1 2 3 4 5

<t t-foreach="record.message_parter_ids.raw_value.slice(0, 3)"     t-as="rec">     <t t-esc="rec" />     <t t-if="!rec_last">;</t> </t>

條件判斷 – t-if

我們的看板視圖在卡片選項菜單中使用了t-if指令來根據不同條件顯示不同選項。t-if指令在客戶端渲染看板視圖時需傳入在 JS 中運行的表達式。標簽和其內容僅在條件運行值為true 時才會渲染。作為示例，僅在借出有值時顯示圖書借出數量，在request_date字段后加入如下代碼：

 

1 2 3

<t t-if="record.num_books.raw_value gt 0">                                         <li><field name="num_books" /> books</li>                                     </t>

我們使用了<t t-if=”…”>元素，這樣在條件為 false 時，元素不會有任何輸出。在為 true 時，僅會渲染其所包含的<li>元素來進行輸出。注意條件表達式中使用gt符號來替代>以表示大於運算符。可通過t-elif和t-else來支持else if和else條件語句，使用示例如下：

 

1 2 3 4 5 6 7 8 9

<t t-if="record.num_books.raw_value == 0">                                         <li>No books.</li>                                     </t>                                     <t t-elif="record.num_books.raw_value gt 9">                                         <li>A lot of books!</li>                                     </t>                                     <t t-else="">                                         <li><field name="num_books" /> books.</li>                                     </t>

Javascript表達式中，AND和OR的運算符分別為&&和 ||。但在 XML 中不支持&符號，我們可以使用 and 和 or 運算符來規避這一問題。

渲染值 – t-esc和t-raw

我們使用了<field>元素來渲染值，但也可以無需<field>標簽直接顯示字段值。t-esc指令運行表達式並將其渲染為轉義后的 HTML 值，如下所示：

 

1	<t t-esc="record.message_partner_ids.raw_value" />

有些情況下，如果確定源數據是安全的，可以無需轉義使用t-raw 來渲染原始值，如下例所示：

 

1	<t t-raw="record.message_partner_ids.raw_value" />

 

小貼士：出於安全考慮，應盡量避免使用t-raw。它應嚴格用於輸出特別准備不包含用戶數據的HTML 數據，或者是已明確對 HTML 特殊字符轉義的用戶數據。

為變量設置值 – t-set

對於更復雜的邏輯，我們可以將表達式結果存儲在變量中，在模板中隨后使用。這通過t-set指令來實現，它設置變量名，緊接着使用t-value指令來添加表達式計算分配的值。作為示例，以下代碼將優先級較高的和前面一節一樣渲染為紅色，但使用red_or_black 變量來作為 CSS 類使用的變量，如下所示：

 

1 2 3 4 5

<t t-set="red_or_black"                                         t-value="record.priority.raw_value gte '2' ? 'oe_kanban_text_red' :''" />                                     <li t-att-class="red_or_black">                                         <field name="user_id" />                                     </li>

變量中也可分配 HTML內容，示例如下：

 

1 2 3 4

<t t-set="calendar_sign">     <i class="fa fa-calendar" /> </t> <t t-raw="calendar_sign" />

 

調用和復用其它模板 – t-call

QWeb模板可作為可復用的 HTML 片段插入到其它模板中。我們無需重復相同的 HTML 代碼塊，可以設計構成部分來組成更為復雜的用戶界面視圖，可復用的模板在<templates>標簽中定義，通過頂級元素中 kanban-box 以外的 t-name值進行標識。這些模板可通過t-call來進行包含，在當前看板視圖、相同模塊的其它地方以及其它插件模塊中均可。

follower頭像列表可以通過可復用代碼段來進行分離，下面通過子模板重寫代碼。首先應在 XML 文件中添加另一個模板，在<templates>元素內，<t t-name=”kanban-box”>節點之后，添加如下代碼：

 

1 2 3 4 5 6 7 8 9

<t t-name="follower_avatars">                         <div>                             <t t-foreach="record.message_partner_ids.raw_value.slice(0,3)"                                 t-as="rec">                                 <img t-att-src="kanban_image('res.partner', 'image_small', rec)"                                     class="oe_avatar" width="24" height="24" alt="" />                             </t>                         </div>                     </t>

在kanban-box主模板調用它就簡單明了了，將原來包含 for each 指令的<div>元素修改為如下代碼：

 

1	<t t-call="follower_avatars" />

調用其它插件模塊中定義的模板，和視圖類似，我們需要使用完整的module.name標識符。比如，以上代碼片斷可使用library_checkout.follower_avatars完整標識符來進行引用 。調用的模板和調用者運行在同一上下文中，所以調用方中的變量名在處理調用模板時同樣可用。

一種更優雅的實現方式是向調用模板傳遞參數，這通過在 t-call 標簽中設置變量來完成。這些僅在子模板上下文中運行和使用，在調用方上下文中並不存在。我們將使用這個方法來讓調用方設置follower 頭像的最大數，而不是在子模板中硬編碼。首先，我們將原固定值3修改為一個變量 arg_max：

 

1 2 3 4 5 6 7 8 9

<t t-name="follower_avatars">                         <div>                             <t t-foreach="record.message_partner_ids.raw_value.slice(0, arg_max)"                                 t-as="rec">                                 <img t-att-src="kanban_image('res.partner', 'image_small', rec)"                                     class="oe_avatar" width="24" height="24" alt="" />                             </t>                         </div>                     </t>

然后像下面這樣在執行子模板調用時定義該變量：

 

1 2 3

<t t-call="follower_avatars">                                         <t t-set="arg_max" t-value="3" />                                     </t>

t-call元素內的整個內容可通過0（數字零）這個魔法變量在子模板中使用。不使用參數變量，我們還可以定義代碼片斷並在子模板中通過<t t-raw=”0″ />使用。這對以模塊化的方式創建布局、合並/嵌套 QWeb 模板尤為有用。

字典和列表動態屬性

我們已經學習最重要的那些QWeb指令，但還有一部分我們也應該了解。下面簡短地進行講解。

前面我們看到t-att-NAME和t-attf-NAME樣式的動態標簽屬性，此外還可以使用固定的t-att指令。它接收鍵值對字典或pair（兩個元素的列表）。

使用如下映射：

 

1	<p t-att="{'class': 'oe_bold', 'name': 'Hello'}" />

將生成如下結果：

 

1	<p class="oe_bold" name="Hello" />

使用如下 pair：

 

1	<p t-att="['class', 'oe_bold']" />

將生成如下結果：

 

1	<p class="oe_bold" />

 

看板視圖的繼承

看板視圖和報表中使用的模板可通過視圖相同的常規方法來進行繼承，例如，使用XPath表達式，參見第四章 Odoo 12 開發之模塊繼承。

常見的情況是使用<field>元素作為選擇器，然后在其前或后添加其它元素。對於看板視圖，同一字段可聲明多次，例如在模板前和模板內分別聲明。這時，選擇器將匹配第一個字段元素，不會將修改我們希望修改的模板內的字段。要規避這一問題，我們需使用XPath來確保匹配的是模板內的字段，例如：

 

1 2 3 4 5 6 7 8 9 10 11

<record id="res_partner_kanban_inherit" model="ir.ui.view"> <field name="name">Contact Kanban modification</field> <field name="model">res.partner</field> <field name="inherit_id" ref="base.res_partner_kanban_view" /> <field name="arch" type="xml"> <xpath expr="//t[@t-name='kanban-box']//field[@name='display_name']" position="before"> <span>Name:</span> </xpath> </field> </record>

在上例中，XPath 查找<t t-name=”kanban-box”>元素內的<field name=”display_name”>元素。這條規則會排除掉<templates>版塊之外的相同字段元素。對於更 復雜的XPath表達式，我們可以使用命令行工具來研究出正確的語法。你的 Linux 系統中可能已有安裝了xmllint工具（sudo apt install libxml2-utils），它有一個–xpath 選項可對 XML 文件執行查詢。

另一個輸出更好看的選項是Debian/Ubuntu包中的libxml-xpath-perl，帶有一個xpath 命令：

 

1 2	$ sudo apt-get install libxml-xpath-perl $ xpath -e "//record[@id='res_partner_kanban_view']" -e "//field[@name='display_name']]" /path/to/myfile.xml

 

自定義 CSS 和 JavaScript

如前所見，看板視圖大多數為 HTML 並重度使用了 CSS 類。我們介紹了標准產品中提供的一些常用 CSS 類，但要實現最佳效果，我們還可以為模塊添加自己的 CSS。我們這里不會詳細講解 CSS 代碼的寫法，但相應地需要講解如何為模塊添加自己的 CSS (JavaScript)這些前端資源。Odoo 中后台的前端資源在assets_backend模塊中聲明。要在模塊中添加前端資源，需要對模塊進行繼承。進行這一操作的 XML 文件通常放在views/ 模塊子目錄內。

以下是在library_checkout模塊中添加一個 CSS 和 JavaScript文件的示例，對應文件為library_checkout/views/checkout_kanban_assets.xml：

 

1 2 3 4 5 6 7 8 9 10 11 12

<odoo>     <template id="assets_backend" inherit_id="web.assets_backend"         name="Library Checkout Kanban Assets">         <xpath expr="." position="inside">             <link rel="stylesheet"                 href="/library_checkout/static/src/css/checkout_kanban.css" />             <script type="text/javascript"                 src="/library_checkout/static/src/js/checkout_kanban.js">             </script>         </xpath>     </template> </odoo>

和平常一樣，需要在__manifest__.py描述文件中對其進引用，注意這些前端文件放在/static/src 子目錄中，這不是強制要求，但是約定俗成如此。

總結

我們學習了看板和如何創建看板視圖來實現這些看板。我們還介紹了QWeb模板以及使用它來設計看板卡片。QWeb同時還是 CMS 網站的渲染引擎，因此它在 Odoo 工具集中的重要性越來越高。

看板視圖可通過其它視圖中使用的相同XML語法來進行繼承。看板的 XML 結構可能會更為復雜，我們經常需要使用XPath表達式來定義需繼承的元素。

最后，高級看板視圖可以使用獨有的 CSS 和 JavaScript 文件。可作為模塊文件來進行添加，然后應在web.assets_backend QWeb模板中添加這些文件，以在客戶端頁面中包含。

在下一篇文章中，我們將繼續使用QWeb，但是是在服務端創建自定義報表 。