Qweb

118 阅读 0 评论 78 点赞

我是靠谱客的博主怡然银耳汤，最近开发中收集的这篇文章主要介绍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>