odoo qweb学习笔记 (一) -- 属性

属性

qweb可以对属性进行实时计算并在输出时设置，通过t-attr来实现，有三种形式：

• t-att-$name可以创建一个名为$name的属性，原属性的值会被解析为新生成的属性的值

<div t-att-a="666"/>  
# 输出
<div a="666"></div>

• t-attf-$name与第一个类似，但它的值是一个格式化字符串而不是表达式，一般用于字符+变量组合如：

<t t-foreach="[1, 2, 3]" t-as="item">
    <li t-attf-class="row {{ item_parity }}"><t t-esc="item"/></li>
</t>

# 输出：
<li class="row even">1</li>
<li class="row odd">2</li>
<li class="row even">3</li>

• t-att=mapping如果参数是映射表，每个键值对会生成一个属性：

<div t-att="{'a': 1, 'b': 2}"/>
# 输出
<div a="1" b="2"></div>

• t-att=pair如果参数是元组或2个元素的数组，那么第一个项就作为属性名，第二个作为属性值

<div t-att="['a', 'b']"/>
# 输出
<div a="b"></div>

使用t-attf进行属性字符串替换

t-attf指令使用字符串替换动态生成标记属性。这允许动态生成较大的字符串，例如URL地址或CSS类名。
{{ }}可以是任何有效的JavaScript表达式，可以使用任何可用的Qweb表达式的变量，如record和widget。
我们可以使用这个指令来动态更改截止日期的颜色，以便过期日期以红色显示。

<field name="date_deadline"/>:
<li t-attf-class="oe_kanban_text_{{   record.date_deadline.raw_value and 
  !(record.date_deadline.raw_value > (new Date())) 
  ? 'red' : 'black' }}">
<field name="date_deadline"/></li>

class="oe_kanban_text_red"或者 class="oe_kanban_text_black"，这取决于最终的日期。注意，当 oe_kanban_text_redCSS 类在看板视图可用时, oe_kanban_text_blackCSS 类不存在。

使用t-att作为动态属性

t-attQweb指令动态计算一个表达式并生成一个属性值。
t-att-name和t-attf-name可以用于渲染任何属性，作为生成的属性名称是从NAME后缀获取的。

更多的方法来使用t-attf

前面讲到t-att-name和t-attf-name风格动态标识属性。此外，固定t-att指令也可以使用。它要么接受一个键值字典映射，要么是一对（一个二元素的列）。
使用如下映射：

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

结果如下:

<p class="oe_bold" name="test1" />

使用如下:

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

结果如下:

<p class="oe_bold" />