ODOO14里面qweb使用案例

2021-08-30 22:00:47 阅读：353 来源： 互联网

标签：后面 web ODOO14 案例用于 var 指明 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' },
    }
});


上面基础语法上的一些基本操作与使用

标签：后面,web,ODOO14,案例,用于,var,指明,qweb,模板
来源： https://www.cnblogs.com/1314520xh/p/15208052.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ODOO14里面qweb使用案例