第 14 章：QWeb 简史

到目前为止，我们房地产模块的界面设计还相当有限。构建列表视图很直接，因为只需要字段列表。表单视图也是如此：尽管用到了 <group> 或 <page> 等少数标签，但在设计方面几乎没有什么要做的工作。

然而，如果我们想为应用赋予独特的外观，就需要更进一步，能够设计新的视图。此外，PDF 报表或网站页面等其他功能需要另一种更灵活的工具来创建：一个 templating 引擎。

你可能已经熟悉 Jinja（Python）、ERB（Ruby）或 Twig（PHP）等现有引擎。Odoo 自带一个内置引擎：QWeb 模板。QWeb 是 Odoo 使用的主要模板引擎。它是一个 XML 模板引擎，主要用于生成 HTML 片段和页面。

你可能已经在 Odoo 中见过 kanban board （看板），其中记录以卡片式的结构显示。我们将为房地产模块构建这样一个视图。

具体示例：看板视图

参考：与本主题相关的文档可在 看板 中找到。

注解

目标：本节结束时，应创建房产的看板视图：

在我们的房地产应用中，我们希望添加一个看板视图来显示房产。看板视图是 Odoo 的标准视图（与表单视图和列表视图一样），但其结构灵活得多。实际上，每张卡片的结构都是表单元素（包括基础 HTML）与 QWeb 的混合。看板视图的定义与列表视图和表单视图类似，只是其根元素是 <kanban>。最简单形式的看板视图如下：

<kanban>
    <templates>
        <t t-name="card">
            <div>
                <field name="name"/>
            </div>
        </t>
    </templates>
</kanban>

我们来逐一分析这个示例：

• <templates>：定义 QWeb 模板 模板的列表。看板视图 必须 至少定义一个根模板 card，该模板会为每条记录渲染一次。

• <t t-name="card">：<t> 是 QWeb 指令的占位元素。在这里，它用于将模板的 name 设置为 card

• <field name="name"/>：这会将 name 字段添加到视图中。

练习

创建一个最小的看板视图。

使用提供的简单示例，为房产创建一个最小的看板视图。唯一需要显示的字段是 name。

提示：你必须在相应的 ir.actions.act_window 的 view_mode 中添加 kanban。

看板视图可以正常工作后，我们就可以开始改进它。如果我们想有条件地显示某个元素，可以使用 t-if 指令（参见 条件判断）。

<kanban>
    <field name="state"/>
    <templates>
        <t t-name="card">
            <div>
                <field name="name"/>
                <div t-if="record.state.raw_value == 'new'">
                    This is new!
                </div>
            </div>
        </t>
    </templates>
</kanban>

我们添加了几项内容：

• t-if：如果条件为真，则渲染 <div> 元素。

• record：一个对象，其属性包含所有请求的字段。每个字段都有两个属性 value 和 raw_value。前者按当前用户参数格式化，后者是来自 read() 的直接值。

在上面的示例中，字段 name 添加在 <templates> 元素中，而 state 位于其外部。当我们需要某个字段的值但又不想在视图中显示它时，可以将其添加在 <templates> 元素之外。

练习

改进看板视图。

将以下字段添加到看板视图：预期价格、最佳价格、销售价格和标签。请注意：只有在收到报价时才显示最佳价格，而只有在接受报价后才显示销售价格。

可视化示例请参阅该节的 目标。

让我们给视图做最后的润色：房产必须默认按类型分组。你或许想看看 看板 中描述的各种选项。

练习

添加默认分组。

使用合适的属性让房产默认按类型分组。你还必须禁止拖放。

可视化示例请参阅该节的 目标。

看板视图是一个典型的例子，说明从现有视图开始并对其进行微调，而不是从头开始，总是个好主意。可用的选项和类很多，所以……多读多学！