通达科技 - 宜兴电脑维护及IT服务外包服务商

Owl应用程序由组件组成，其中只有一个根组件。让我们从定义根组件开始。用以下代码替换app.js中函数的内容:

const { Component, mount, xml } = owl;

// Owl Components
class Root extends Component {
  static template = xml`<div>todo app</div>`;
}

mount(Root, document.body);

现在，在浏览器中重新加载页面应该会显示一条消息。

代码非常简单:我们使用内联模板定义组件，然后将其挂载到文档主体中。

注1:在较大的项目中，我们会将代码拆分为多个文件，其中组件位于子文件夹中，主文件用于初始化应用程序。然而，这是一个非常小的项目，我们希望保持它尽可能简单。

注意2:本教程使用静态类字段语法。这还不是所有浏览器都支持的。大多数实际项目都会编译它们的代码，所以这不是问题，但对于本教程，如果你需要代码在每个浏览器上工作，你需要将每个静态关键字转换为类的赋值:

class App extends Component {}
App.template = xml`<div>todo app</div>`;

注意3:使用xml helper编写内联模板很好，但是没有语法高亮显示，这使得很容易生成格式错误的xml。对于这种情况，一些编辑器支持语法高亮显示。 例如，VS Code有一个插件 Comment tagged template,如果安装了，它将正确显示标记的模板:

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

注4:大型应用程序可能希望能够翻译模板。使用内联模板会稍微困难一些，因为我们需要额外的工具从代码中提取xml，并用翻译后的值替换它。