Odoo 15 前端框架 OWL官方文档 中文版--边学边练笔记2

目录

本节重点

项目配置

添加第一个组件

小结：

---

本节重点

本教程中，我们将创建一个简单的待办清单应用。该应用需满足以下要求：

• 让用户可以创建并删除任务
• 任务可标记为完成
• 可对任务进行过滤展示活跃/已完成任务

通过本项目有机会发现并学习Owl的一些重要概念，比如组件、存储以及如何组织应用

项目配置

本教程中，我们创建一个非常简单的项目，包含静态文件但没有其它工具。第一步是创建如下的文件结构：

1 2 3 4 5

todoapp/     index.html     app.css     app.js     owl.js

 

 

应用的入口是index.html，内容如下：

最后应当从Owl仓库下载最新版的owl.js（你也可以直接使用owl.min.js）。

访问https://github.com/odoo/owl/releases下载最新版本 owl.js

此时，项目准备就绪。在浏览器中加载index.html文件，页面内容为空，标题为Odoo 15 前端框架 OWL官方文档 中文版--边学边练笔记2，在控制台中出现了

 重下owl.cjs.min.js依然出此错，提示

 网上查询，也没看到如何解决，暂时先留着，往下走

添加第一个组件

Owl应用由组件构成，包含一个根组件。下面我们来定义一个App组件。使用如下代码替换掉app.js 中函数的内容。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

const { Component } = owl; const { xml } = owl.tags; const { whenReady } = owl.utils; // Owl Components class App extends Component {   static template = xml` todo app `; } // Setup code function setup() {   const app = new App();   app.mount(document.body); } whenReady(setup);

此时重新加载页面会显示一条消息。

代码非常简单，但我们来详细讲解一下最后一行代码。浏览器会尝试尽快执行app.js中的JS代码，在有可能在加载App组件时DOM尚未准备就绪。为避免这一问题，我们使用whenReady帮助函数来将setup函数的执行延迟至DOM准备就绪后。

注意1：在更大型的项目中，我们会把代码分割成多个文件，在子文件夹中放置组件，主文件会用于初始化应用。但这里是一个非常小的项目，我们希望保持尽量简单。

注意2：本教程中使用了静态类字段语法。有些浏览器尚不支持。大部分真实项目会对代码进行转译，不会存在问题，但要让本教程的代码在各个浏览器中正常使用，需要将每个static关键词转换为类赋值：

1 2	class App extends Component {} App.template = xml` todo app `;

注意3：使用xml helper 行内模板很好，但没有语法高亮，这会很容易写出格式错误的xml。针对这一情况有些编辑器支持语法高亮。例如，VS Code中有一个插件Comment tagged template，安装后会正常显示带标签模板：

1	static template = xml /* xml */` todo app `;

注意4：大型应用可能需要对模板进行翻译。使用行内模板会让其变得困难，因为我们需要额外的工具类从代码中提取 xml，再使用翻译值进行替换。

小结：

以上这种方法没弄好配置暂时放弃，还是回到odoo中去学习，省了配置，回来再继续研究