【odoo】了解Odoo QWeb模板

概要

        odoo使用的主要模板引擎是一个 XML 模板引擎--qweb模板，它主要用于生成 HTML 片段和页面。模板指令以 t- 作为前缀的 XML 属性形式存在，例如 t-if 条件指令，其中元素和其他属性被直接呈现。另外，为了避免元素渲染，可以使用占位符元素 <t>，它会执行其指令但本身不会生成任何输出。

tip：此文章以odoo17为例进行说明。 

模板常用语法

输出数据：t-out

• 接受一个表达式，对其进行评估并将结果注入文档中
• 自动对其输入进行 HTML 转义，从而限制显示用户提供的内容时XSS风险。

<p>
    <t t-esc="value"/>
</p>

条件判断：t-if、t-elif、t-else

• 跟平时写代码判断逻辑一样：t-if==>t-elif==>t-else

<div>
    <p t-if="user.value == 1">Happy birthday!</p>
    <p t-elif="user.value== 2">Welcome master!</p>
    <p t-else="">Welcome!</p>
</div>

循环：t-foreach

• 接受一个返回要迭代的集合的表达式，第二个参数t-as提供迭代的“当前项”的名称

<t t-foreach="[1, 2, 3]" t-as="i">
    <p><t t-out="i"/></p>
</t>
渲染为==>
<p>1</p>
<p>2</p>
<p>3</p>

绑定属性：t-att

• t-att-$name：创建一个名为的属性$name，评估属性值并将结果设置为属性的值：

<div t-att-a="12"/>
渲染为==>
<div a="12"></div>

• t-attf-$name：与前一个相同，但参数是一个格式字符串 而不仅仅是一个表达式，通常用于混合文字和非文字字符串（例如类）：

<t t-foreach="[1, 2, 3]" t-as="item">
    <li t-attf-class="row {{ (item_index % 2 === 0) ? 'one' : 'two' }}">
        <t t-out="item"/>
    </li>
</t>
渲染为==>
<li class="row one">1</li>
<li class="row two">2</li>
<li class="row one">3</li>

• t-att=mapping：如果参数是一个映射，则每个（键，值）对都会生成一个新属性及其值：

<div t-att="{'a': 11, 'b': 22}"/>
渲染为==>
<div a="11" b="22"></div>

• t-att=pair：如果参数是一对（元组或 2 个元素的数组），则该对的第一项是属性的名称，第二项是值：

<div t-att="['demo', 'a']"/>
渲染为==>
<div demo="a"></div>

设置变量：t-set、t-value

• 包含表达式的属性t-value，其评估结果将被设置：

<t t-set="demo" t-value="1 + 1"/>
输出==>
<t t-out="demo"/>
结果：2

•  没有t-value属性，则呈现节点的主体并将其设置为变量的值：

<t t-set="demo">
    <li>hello</li>
</t>
输出==>
<t t-out="demo"/>
结果：<li>hello</li>

调用子模版：t-call

•  模板可用于顶层渲染，但也可以在另一个模板中使用（以避免重复或为模板的各部分命名），使用指令t-call：

<template id="called_template">
    <div>
        <p>子模板。</p>
        <p>这个模板接收到的参数是：<t t-out="parameter"/></p>
    </div>
</template>
<template id="main_template">
    <t t-set="parameter" t-value="'Hello, World!'"/>
    <div>
        <p>主模板。</p>
        <t t-call="called_template"/>
    </div>
</template>

最后编译后==>
<div>
    <p>主模板。</p>
    <div>
        <p>子模板。</p>
        <p>这个模板接收到的参数是：Hello, World!</p>
    </div>
</div>

调试：t-log、t-debug、t-js

• t-log：浏览器控制台输出（类似console.log）

<t t-set="demo" t-value="11"/>
<t t-log="demo"/>

• t-debug：触发调试器断点

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

• t-js：可以在模板渲染期间执行的 JavaScript 代码，采用一个参数，该参数是渲染上下文在主体context中可用的名称

<t t-set="demo" t-value="10"/>
<t t-js="j">
    console.log("demois", j.demo);
</t>

小结

        多写多敲多思考，毕竟，知己知彼才能看懂源码。