ODOO14里面qweb使用案例

在ODOO里面中，通過QWeb來對模板進行渲染后加載到瀏覽器中，故作筆記以便於查詢
簡介：Qweb被用作OpenERP的Web客戶端模板引擎。它是一種基於XML的模板語言，同Genshi, Thymeleaf、Facelets模板具有相似並且具有以下特性：

               1、完全在客戶端瀏覽器中完成渲染；

               2、一個模板文件中可以包含多個模板，通常一個模板文件中包含一個模板；

               對OpenERP的web組件有很好的支持，也可以用於除開OpenERP web外的其他框架。

 

一、基礎語法：模板中的標簽統一都是以"t-"開始的。

 t-name 用於指明模板的名稱
案例：

<t t-name="code_backend_theme.Sidebar">
 ...

</t>

 

 t-extend 用於指明該模板是繼承自另外哪一個模板，后面會帶父模板的名稱，如：t-extend=“Login"

t-jquery 一個jQuery的選擇器，后面指明選擇器的定義，如：t-jquery=".oe_logiin"

t-operation 一般跟在t-jquery后面，指明選擇器找到元素后執行的動作，其值有：append(追加)、replace(替換)、after、inside

案例：

1、
<t t-extend="Menu">  <t t-jquery=".o_main_navbar" t-operation="after"> <div class="sidebar_panel" id="sidebar_panel"/> </t> </t>


2、

<t t-jquery="img" t-operation="attributes">
 <attribute name="t-att-title">value</attribute>
</t>

3、

<t t-jquery="span:first" t-operation="prepend">
 <span t-if="attendeesData[el_index]" t-attf-class="o_calendar_invitation #{attendeesData[el_index].status}"/>
</t>

 t-if 用於指明元素在頁面產生的條件，后面是帶一個javascript的表達式，返回True或False

<div t-if="widget._initialState.valuemax"> <div t-if="widget._initialState.valuemax &gt; widget._initialState.defaultDisplayQty"> <button class="btn btn-secondary js_load_more">Load more</button> </div> </div>

t-att-### 用於指明一個元素的屬性值，###是元素的屬性名稱，如：t-att-value="javascript表達式"
 t-foreach 用於指明一個循環調用，后面一般帶的是一個數組 t-as 用於取得循環中的單個值，與t-foreach搭配使用，后面帶的是一個變量名，可以循環中使用變量取值

t-esc 用於一個文字輸出

<ul class="sidebar_menu"> <t t-foreach="widget.getApps()" t-as="app"> <li> <a role="menuitem" t-attf-href="#menu_id=#{app.menuID}" class="nav-link" t-att-data-menu-id="app.menuID" t-att-data-menu-xmlid="app.xmlID" t-att-data-action-id="app.actionID"> <img class="sidebar_img" t-attf-src="data:image/png;base64,#{app.web_icon_data}"/> <span class="sidebar_app_name"> <t t-esc="app.name"/> </span> </a> </li> </t> </ul>

 t-call 用於調用另外模板，后面帶一個模板的名稱

t-set 用於設定一個變量，后面帶變量的名稱，一般跟t-value搭配使用
 t-value 用於指定某個變量或元素的值

<div t-name="PdcDocument.files" class="o_attachments" aria-atomic="true"> <!-- uploaded files --> <t t-foreach="widget.value.data" t-as="file"> <t t-if="!file.data.upload" t-call="PdcDocument.attachment_preview"/> </t>

 <!-- uploading files --> <t t-foreach="widget.uploadingFiles" t-as="file"> <t t-set="upload" t-value="true"/> <t t-call="PdcDocument.attachment_preview"/> 調用qweb模板 PdcDocument.attachment_preview

 </t>
 </div>

<t t-name="PdcDocument.attachment_preview"> <t t-set="url" t-value="widget.metadata[file.id] ? widget.metadata[file.id].url : false"/> <t t-if="file.data" t-set="file" t-value="file.data"/> <t t-set="editable" t-value="widget.mode === 'edit'"/> <t t-if="file.mimetype" t-set="mimetype" t-value="file.mimetype"/> <div t-attf-class="o_attachment o_attachment_many2many #{ editable ? 'o_attachment_editable' : '' } #{upload ? 'o_attachment_uploading' : ''}" t-att-title="file.name"> <div class="o_attachment_wrap"> <t t-set="ext" t-value="file.name.replace(/^.*\./, '')"/> <div class="o_image_box float-left" t-att-data-id="file.id"> <div t-att-title="'Download ' + file.name" aria-label="Download"> <span class="o_image o_hover" t-att-data-id="FileId" t-att-data-mimetype="mimetype" t-att-data-ext="ext" role="img"/> </div> </div> <div class="caption"> <a class="ml4" t-att-href="url" t-att-title="'Download ' + file.name"> <t t-esc='file.name'/> </a> </div> <div class="caption small"> <div class="ml4 small text-uppercase" t-att-title="'Download ' + file.name"> <b> <t t-esc='ext'/> </b> </div> <div t-if="editable" class="progress o_attachment_progress_bar"> <div class="progress-bar progress-bar-striped active" style="width: 100%">Uploading</div> </div> </div> <div t-if="editable" class="o_attachment_uploaded"> <i class="text-success fa fa-check" role="img" aria-label="Uploaded" title="Uploaded"/> </div> <div t-if="editable" class="o_attachment_delete" t-att-data-id="file.id"> <span class="text-white" role="img" aria-label="Delete" title="Delete">×</span> </div> </div> </div> </t>

 

var AbstractField = require("web.AbstractField"); var field_registry = require("web.field_registry"); var core = require('web.core'); var qweb = core.qweb; var Upload_skim_pdf = AbstractField.extend({ template: "FieldBinaryFileUploader", --擴展binary字段  template_files: "PdcDocument.files", supportedFieldTypes: ['many2many'], fieldsToFetch: { name: { type: 'char' }, mimetype: { type: 'char' }, } });

 

上面基礎語法上的一些基本操作與使用