首页 > 解决方案 > 使用 QWeb 模板在 Odoo 中进行原子设计

问题描述

我正在 odoo 11.0 中设计一个网站,并想为一些将在多个视图中使用的元素创建一个文件,例如日历,我需要创建一个包含日历的所有 html 元素的文件,然后在我需要在其中显示日历的每个视图都简单地导入了包含它的文件,即应用原子设计,但我搜索并找不到它。

标签: atomicodoo-11odoo-view

解决方案


要为您需要在其他时间重用的每个元素创建一个文件,您必须创建一个带有<odoo>, <data>and<template>标签的文件,就好像它是一个通用视图一样,然后导入它您使用<t t-call = "module.template_id"> </ t>,例如,在我的情况下,我需要创建一个包含所有 html 元素的日历,然后将其导入其他视图,为此:

  1. 我使用以下代码在my_module/views/share文件夹中创建calendar.xml文件:

    <?xml version="1.0" encoding="UTF-8"?>
    <odoo>
    <data>
    <template id="calendar">
    
        <!--HTML code-->
    
    </template>
    </data>
    </odoo>
    
  2. 我将此文件导入模块__manifest__.py文件

  3. 要将它导入另一个视图 use t-call,假设我的模块名为my_module,要导入它,我们编写:

    <odoo>
    <data>
    <template id="index_template">
        <t t-call="website.layout">
            <div id="wrap">
                <div class="container">
    
                    <!--=============importing calendar============-->
                    <t t-call="my_module.calendar">
                    </t>
    
                   <!--=============other HTML code============-->
    
                </div>
            </div>
        </t>
    </template>        
    </data>
    </odoo>
    

如果我正在导入的视图显示动态数据,例如,我需要显示一个海报,例如:选择日期为:'event_type',其中可能的值是:事件、派对、预订等。并且它会在显示日历的那一刻取值,在日历文件中,我们使用一个变量,该变量将从导入它的视图中设置,calendar.xml文件如下所示:

    <?xml version="1.0" encoding="UTF-8"?>
    <odoo>
    <data>
    <template id="calendar">
        <h1>Choose the date for the <t t-esc="event_type"/></h1>
        <!--HTML code-->

    </template>
    </data>
    </odoo>

在我要导入日历的文件中,我必须设置变量“ event_type ”的值,在这种情况下,将显示:“选择聚会的日期”,文件如下所示:

    <odoo>
    <data>
    <template id="index_template">
        <t t-call="website.layout">
            <div id="wrap">
                <div class="container">

                    <!--=============importing calendar============-->
                    <t t-call="my_module.calendar"> 
                       <t t-set="event_type">party</t>
                    </t>

                   <!--=============other HTML code============-->

                </div>
            </div>
        </t>
    </template>        
</data>
</odoo>

以同样的方式我们可以调用嵌套视图,以重用我们想要的一切,例如,我们可以创建另一个导入到 calendar.xml 中的模板,以便显示索引页面,我们导入日历,然后日历导入另一个模板


推荐阅读