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

最新推荐文章于 2024-05-22 09:50:17 发布

信息化未来

最新推荐文章于 2024-05-22 09:50:17 发布

阅读量2.8k

点赞数 1

分类专栏： odoo15 owl学用笔记文章标签：前端框架前端

本文链接：https://blog.csdn.net/fqfq123456/article/details/122240364

版权

odoo15 owl学用笔记专栏收录该内容

77 篇文章 5 订阅 ¥89.90 ¥99.00

订阅专栏

超级会员免费看

本节重点

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

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

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

项目配置

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

todoapp/

index.html

app.css

app.js

owl.js

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Odoo 15 前端框架 OWL官方文档 中文版--边学边练笔记2</title>
    <link rel="stylesheet" href="app.css" />
    <script src="owl.js"></script>
    <script src="app.js"></script>
  </head>
  <body></body>
</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 中函数的内容。

const { Component } = owl;

const { xml } = owl.tags;

const { whenReady } = owl.utils;

// Owl Components

class App extends Component {

static template = xml`<div>todo app</div>`;

}

// 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`<div>todo app</div>`;

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

1	static template = xml /* xml */`<div>todo app</div>`;

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

小结：

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

信息化未来

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Odoo 15 前端框架 OWL官方文档中文版--边学边练笔记2

目录本节重点项目配置添加第一个组件小结：本节重点本教程中，我们将创建一个简单的待办清单应用。该应用需满足以下要求：让用户可以创建并删除任务任务可标记为完成可对任务进行过滤展示活跃/已完成任务通过本项目有机会发现并学习Owl的一些重要概念，比如组件、存储以及如何组织应用项目配置本教程中，我们创建一个非常简单的项目，包含静态文件但没有其它工具。第一步是创建如下的文件结构： 1 2 3 4 5 todoa
复制链接

扫一扫