odoo10 开发者文档(5)--QWeb

本文档整理自odoo官网

QWeb

QWeb是由odoo的Web客户端使用模板引擎。它是一种基于XML的模板语言，类似于 Genshi, Thymeleaf 或者 Facelets与几个特点：
(1) 它完全用JavaScript实现，并在浏览器中呈现。
(2) 每个模板文件（XML文件）包含多个模板，模板引擎通常在模板文件和模板之间进行1:1映射。
(3) 它有OpenERP Web’s Widget的特别支持，虽然它可以是OpenERP Web之外使用（并且使用Widget不依赖qweb集成是可能的）。
使用qweb而不是使用一种更加流行的模板语法的依据是，其扩展机制与ERP的视图的继承机制非常相似。像OpenERP的视图，qweb模板是一个XML树，因此XPath和DOM操作易于执行它。
下面是一个大多数QWeb模板功能的示例：

<templates>  <div t-name="example_template" t-attf-class="base #{cls}">    <h4 t-if="title"><t t-esc="title"/></h4>    <ul>      <li t-foreach="items" t-as="item" t-att-class="item_parity">        <t t-call="example_template.sub">          <t t-set="arg" t-value="item_value"/>        </t>      </li>    </ul>  </div>  <t t-name="example_template.sub">    <t t-esc="arg.name"/>    <dl>      <t t-foreach="arg.tags" t-as="tag" t-if="tag_index lt 5">        <dt><t t-esc="tag"/></dt>        <dd><t t-esc="tag_value"/></dd>      </t>    </dl>  </t></templates>

渲染下面的内容：

{    "class1": "foo",    "title": "Random Title",    "items": [        { "name": "foo", "tags": {"bar": "baz", "qux": "quux"} },        { "name": "Lorem", "tags": {                "ipsum": "dolor",                "sit": "amet",                "consectetur": "adipiscing",                "elit": "Sed",                "hendrerit": "ullamcorper",                "ante": "id",                "vestibulum": "Lorem",                "ipsum": "dolor",                "sit": "amet"            }        }    ]}

会产生下面的HTML文档：

<div class="base foo">    <h4>Random Title</h4>    <ul>        <li class="even">            foo            <dl>                <dt>bar</dt>                <dd>baz</dd>                <dt>qux</dt>                <dd>quux</dd>            </dl>        </li>        <li class="odd">            Lorem            <dl>                <dt>ipsum</dt>                <dd>dolor</dd>                <dt>sit</dt>                <dd>amet</dd>                <dt>consectetur</dt>                <dd>adipiscing</dd>                <dt>elit</dt>                <dd>Sed</dd>                <dt>hendrerit</dt>                <dd>ullamcorper</dd>            </dl>        </li>    </ul></div>