atomic - 使用 QWeb 模板在 Odoo 中进行原子设计
问题描述
我正在 odoo 11.0 中设计一个网站,并想为一些将在多个视图中使用的元素创建一个文件,例如日历,我需要创建一个包含日历的所有 html 元素的文件,然后在我需要在其中显示日历的每个视图都简单地导入了包含它的文件,即应用原子设计,但我搜索并找不到它。
解决方案
要为您需要在其他时间重用的每个元素创建一个文件,您必须创建一个带有<odoo>, <data>
and<template>
标签的文件,就好像它是一个通用视图一样,然后导入它您使用<t t-call = "module.template_id"> </ t>
,例如,在我的情况下,我需要创建一个包含所有 html 元素的日历,然后将其导入其他视图,为此:
我使用以下代码在my_module/views/share文件夹中创建calendar.xml文件:
<?xml version="1.0" encoding="UTF-8"?> <odoo> <data> <template id="calendar"> <!--HTML code--> </template> </data> </odoo>
我将此文件导入模块__manifest__.py文件
要将它导入另一个视图 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 中的模板,以便显示索引页面,我们导入日历,然后日历导入另一个模板
推荐阅读
- swift - 删除并重新写入图像并重新写入会产生错误
- sql - 按关联数量订购模型
- c++ - 你如何通过传递“this”关键字来分配weak_ptr?
- python - 在实现我的 api 时,我希望它能够以 xml 格式查看。不只是 JSON
- node.js - Typescript 和 Googleapis 使用的内存激增
- ruby - 如何在一个已经存在的 Grape::API 端点之后添加一个?
- c# - 如何测试字节数组中的像素是否为白色?
- android - androidx 工作管理器问题 - “java.lang.IllegalStateException:无法解析结果路径字符串:”
- android - 如何在 appium 测试框架中使用 XPath 访问和单击反应原生元素?
- reactjs - setState 只更新一些值