完整目录请见Odoo 14全新前端框架 OWL(Odoo Web Library)官方文档中文版
🦉 如何编写单文件组件？ 🦉
将代码按照功能而非文件类型进行分组大有裨益。这样会更易于扩展为更大规模的应用。
为此，Owl包含了两个帮助标签，来使得在javascript（或typescript）中定义模板或样式更为简便：xml 和 css帮助标签。
这表示模板、样式和javascript代码都可以在同一个文件中进行定义。示例如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
const { Component } = owl; const { xml, css } = owl.tags; // ----------------------------------------------------------------------------- // TEMPLATE // ----------------------------------------------------------------------------- const TEMPLATE = xml/* xml */ ` <div class="main"> <Sidebar/> <Content /> </div>`; // ----------------------------------------------------------------------------- // STYLE // ----------------------------------------------------------------------------- const STYLE = css/* css */ ` .main { display: grid; grid-template-columns: 200px auto; } `; // ----------------------------------------------------------------------------- // CODE // ----------------------------------------------------------------------------- class Main extends Component { static template = TEMPLATE; static style = STYLE; static components = { Sidebar, Content }; // rest of component... } |
注意在上例的xml调用后面有一个行内xml注释。对于一个编辑器插件，如VS Code 的Comment tagged template，会在安装后对模板字符串的内容进行语法高亮显示。
