Qweb

转自:https://www.jianshu.com/p/c60bcb5ecb12
Qweb 是一个基于xml的模板引擎,用于生成HTML片段和页面,模板指令是写在xml标签中的以t- 开头的属性,比如t-if
如果要让一个标签不被渲染,可以采用t来包裹,这样会执行他里面的命令但是不产生任何输出

<t t-if="condition">
    <p>Test</p>
</t>
//condtition为true时上述代码会输出:<p>Test</p>

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

//condtition为true时上述代码会输出:
<div>
    <p>Test</p>
</div>

数据输出

Qweb 有一个自动过滤xml 和 html 的输出命令esc,它接受一个表达式,解析后输出结果

<p><t t-esc="value"/></p>
// 会运行表达式,例如当value值为42时输出结果:
<p>42</p>

还有raw参数与esc类似,但不过滤HTML,用于显示处理好的HTML内容

条件语句

qweb 有一个if 条件判断指令,会自动解析其对应的属性值里面的表达式:

<div>
    <t t-if="condition">
        <p>ok</p>
    </t>
</div>

//谨记:t 包裹的内容是不被渲染的
//当condition是true的时候解析成:
<div>
    <p>ok</p>
</div>

//condition为false的时候解析成
<div>
</div>

//也可用下面的方法实现一样的功能
<div>
    <p t-if="condition">ok</p>
</div>
循环

qweb 有一个指令用于循环处理,t-foreach 用于指定需要循环处理的数据,t-as提供的是在后面用于代表当前项目的变量名:

<t t-foreach="[1, 2, 3]" t-as="i">  // 相当于 for i in [1,2,3]
    <p><t t-esc="i"/></p>
</t>
#上述语句输出:
<p>1</p>
<p>2</p>
<p>3</p>

#也可用下面的方法实现一样的功能
<p t-foreach="[1, 2, 3]" t-as="i">
    <t t-esc="i"/>
</p>

foreach 可用于数组(即t-as为值)、映射表(t-as为key)、整形数字(相当于0-X 的数组)

* $as_all - 被循环的对象
* `$as_value` - 当前循环的值,当处理列表和数字时与 `$as`是一样的,当处理映射表时它代表值,而`$as`代表的是键
* $as_index - 当前循环索引,第0开始计算
* $as_size  - 被循环对象的大小
* $as_first - 当前项目是否是第一个,相当于$as_index == 0
* $as_last - 当前项目是否是最后一个,相当于$as_index + 1 == $as_size
* $as_parity - 当前项目是奇数个还是偶数
* $as_even - 当前项目索引是否为奇数
* $as_odd - 当前项目索引是否为偶数

上述参数只能在foreach里面可用,但可在循环的最后复制到全局环境中

<t t-set="existing_variable" t-value="False"/>
<!-- existing_variable now False -->

<p t-foreach="[1, 2, 3]" t-as="i">
    <t t-set="existing_variable" t-value="True"/>
    <t t-set="new_variable" t-value="True"/>
    <!-- existing_variable and new_variable now True -->
</p>

<!-- existing_variable always True -->
<!-- new_variable undefined -->

属性

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

  • t-att-$name可以创建一个name的属性,原来属性的值会被解析成新生成属性的值
  t-att-a="42"/>  
  #输出 <div a="42"></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> // parity是显示当前项目是基数还是偶数,even是奇数,odd是偶数
    </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>
  • a-att=pair 如果参数是元组或者2个元素的数组,那么第一项就是属性名,第二项就是属性值
<div t-att="['a', 'b']"/>
#输出
<div a="b"></div>

设置变量

qweb允许在模板内设置变量(用于记住一个结果,或为数据定义一个更明确的名字)
使用t-set来实现,他的值就是设置的变量名

  • t-value 属性就是一个表达式,解析后的值作为新变量的值
<t t-set="foo" t-value="2 + 1"/>
  <t t-esc="foo"/>
  //输出3 
  • 如果没有t-value ,节点的内容会被渲染被设置成变量的值
<t t-set="foo">
   <li>ok</li>
</t>
<t t-esc="foo"/> // 数据输出
// 输出结果
&lt;li&gt;ok&lt;/li&gt;
//内容被esc自动输义了,实际上输出的结果是<li>ok</li>

调用子模板

qweb可以用最高级别的渲染,但是也可以通过t-call来包含其他模板
<t t-call="other-template"/>会调用指定名字的模板
如果other-template是

得到的结果会是

<t t-set="var" t-value="1"/>
<t t-call="other-template"/>

#会输出
<p>1</p>

这里有一个问题,在t-call外其他位置会可见。在t-call内设置的内容会在调用子模板时先执行并更新到当前环境中

<t t-call="other-template">
    <t t-set="var" t-value="1"/>
</t>

t-call内包含的内容可以通过一个0的魔术变量来传递给被调用的模板:

#other-template
<div>
    This template was called with content:
    <t t-raw="0"/> // 也是输出,同t-esc,但是t-esc会转义HTML标签,t-raw 会原样输出。
</div>

#main
<t t-call="other-template">
    <em>content</em>
</t>

#output
<div>
    This template was called with content:
    <em>content</em>
</div>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值