DTCloud—QWeb

中亿丰数字科技集团有限公司
124 阅读3分钟

原生 Qweb 的继承

基础的 QWeb 继承与之前的 XML 的写法都不一样，首先不需要 dtcloud 标签的包裹，另外不同于普通的模板，基础模板的写法需要使用 templates 标签包裹。
例如，我们给 Many2one 的部件添加一个前缀 12345，可以这么写：

<templates>
    <t t-extend="FieldMany2One">
        <t t-jquery=".o_field_many2one" t-operation="before">
            <a>123456</a>
        </t>
    </t>
</templates>

t-extend 用于扩展 Qweb 的内容，配合 t-operation 可以实现 XML 中 position 类似的效果，具体来说，t-operation 有以下几种值可以选择：

  • append: 节点的主体被附加在上下文节点的末尾（在上下文节点的最后一个子节点之后）
  • prepend: 节点的主体被添加到上下文节点（在上下文节点的第一个子节点之前插入）
  • before: 节点的主体被插入在上下文节点之前
  • after: 节点的主体被插入在上下文节点之后
  • inner: 节点的主体替换上下文节点的子节点
  • replace: 该节点的主体用于替换上下文节点本身

t-jquery 指令采用一个 CSS selector。此选择器用于扩展模板以选择应用指定的 t-operation 的上下文节点。 如果使用 t-extend，dtcloud 会要求你必须写入一个 t-jquery 选择器，如果想要使用 replace 的本身节点话，就会冲突。此时，你应该选择放弃使用 t-extend，而使用同名的 t-name 将原有的代码覆盖掉，就像 python 的后定义的方法会覆盖掉前面定义的方法一样。

另外，如果想要完全重写某个 QWeb 部件，那么可以不用上面提到的几种操作，直接简单粗暴的定义一个同名的 QWeb 部件即可，后加载的部件会覆盖掉之前定义的部件。

Qweb 的传值

类似 python 中的 jinja2 模板，dtcloud 中的 qweb 也是可以通过后台传值给前端页面的，前端页面也可以进行逻辑判断。Qweb 中的逻辑判断使用标签
逻辑控制 t-if
t-if 主要用于条件判断：

<t t-if="condition">
    <p>Test</p>
</t>

数据输出 t-esc
t-esc 用于输出变量的值：
<p><t t-esc="value"/></p>

字段输出 t-field

<td>
    <span t-field="ml.product_id.display_name"/><br/>
    <span t-field="ml.product_id.description_picking"/>
</td>

t-esc 和 t-field 的区别
t-esc 用于输出数据，其值为 python 表达式执行完的结果。t-field 只能用于字段的访问，且只对存储的字段有效。另外，t-field-options 可用于格式化字段值。例如：
<t-field="o.date" t-field-options='{"widget":"date"'}'/>

逻辑循环 t-foreach
t-foreach 用于迭代循环：

<t t-foreach="[1, 2, 3]" t-as="i">
    <p><t t-esc="i"/></p>
</t>

t-as 将每次迭代的值传给变量 i，方便后续的调用。
这里有多个内置的变量(以 i 为例)：

  • i_all: 迭代的对象
  • i_value: 迭代对象的值，一般情况下和 i 的值相同，但是当迭代字典时，i 为 key，i_value 为字典的值
  • i_index: 序列
  • i_size: 迭代列表的长度
  • i_first: 列表的第一个值
  • i_last: 列表的最后一个值
  • i_parity: 当前迭代的奇偶性
  • i_even: 当前迭代是否为偶数
  • i_odd: 当前迭代是否为奇数
    赋值变量 t-set
    t-set 可以自定义变量：
    <t t-set="existing_variable" t-value="False"/>

设置属性值
qweb 可以用于设置 HTML 中的元素的属性值。
t-att-$name
t-att-$name 用于创建动态的属性名：
<div t-att-name="42">

将创建一个拥有 name 属性值为 42 的节点：
<div name="42">

t-attf-name t-attf-name 与 t-att-name类似，区别在于t-attf-name 输出的是格式化的字符串：

<t t-foreach="[1, 2, 3]" t-as="item">
    <li t-attf-class="row {{ (item_index % 2 === 0) ? 'even' : 'odd'">
        <t t-out="item"/>
    </li>
</t>

输出：

<li class="row even">1</li>
<li class="row odd">2</li>
<li class="row even">3</li>

数据的格式化
对应货币的金额精度，可以使用 format_currency 方法来格式化货币的精度：

<td class = "pos-right-align"> 
    <tt-esc = "widget.format_currency (taxdetail.amount)" /> 
</ td>

对于不需要货币符号的数字，可以使用

avatar
文章
阅读
粉丝