手把手带你学会Odoo OWL组件开发（6）：API

雨点打透心脏的1/2处 2023-10-01 22:01 14阅读 0赞

【**本系列内容直达**：】  
[手把手带你学习Odoo OWL组件开发（1）：认识 OWL][Odoo OWL_1_ OWL]  
[手把手带你学会Odoo OWL组件开发（2）：OWL的使用][Odoo OWL_2_OWL]  
[手把手带你学会Odoo OWL组件开发（3）：核心内容指南][Odoo OWL_3]  
[手把手带你学会Odoo OWL组件开发（4）：OWL组件][Odoo OWL_4_OWL]  
[手把手带你学会Odoo OWL组件开发（5）：浅析OWL原理][Odoo OWL_5_OWL]  
[手把手带你学会Odoo OWL组件开发（6）：API][Odoo OWL_6_API]  
[手把手带你学会Odoo OWL组件开发（7）：OWL项目实战使用][Odoo OWL_7_OWL]

--------------------

【**本篇内容：API**】

Owl 模板使用[QWeb][]规范进行描述。它基于 XML 格式，主要用于生成 HTML。在 OWL 中，QWeb 模板被编译为生成 HTML 的虚拟 dom 表示的函数。此外，由于 Owl 是一个实时组件系统，因此还有其他特定于 Owl 的指令（例如t-on）。

模板指令被指定为以 为前缀的 XML 属性t-，例如t-if对于条件，元素和其他属性直接呈现。 为了避免元素渲染，还可以使用占位符元素，它执行其指令但不会在其自身中生成任何输出。 我们在本节中介绍模板语言，包括其 Owl 特定的扩展。

在owl中和vue和react中不同的插值方式,动态数据想要渲染到页面上需要,使用owl的特定指令, **指令如下:**  
![在这里插入图片描述][cd2493c1bdf546198a5b52207a2e692b.png_pic_center]

--------------------

**常见组件指令及方法指令**  
Owl 中的组件系统需要额外的指令来表达各种需求。以下是所有 Owl 特定指令的列表：  
![在这里插入图片描述][522023a683744e5d819b5ebe302d3915.png_pic_center]

**相应案例**

**t-out** 和**t-esc**基本一样,但是t-out常用来作为输出xml的方式, 如下例子

const { markup, Component, xml } = owl;
     
    class SomeComponent extends Component {
      static template = xml`
     <t t-out="value1"/>
     <t t-out="value2"/>`;
     
      value1 = "<h3>some text 1</h3>";  //第一中,输入出全部内容不会去转译,
      value2 = markup("<h3>some text 2</h3>"); // 第二种会输出xml,标签会转译
    }

**t-set**有点类似于vue中的v-bind就是设置动态绑定值,一般会和t-value一起使用

< t  t-set = " foo "  t-value = " 2 + 1 " />
    < t  t-esc = " foo " />

< div >
        < p  t-if = " user.birthday == today() " >生日快乐！</ p >
        < p  t-elif = " user.login == 'root' " >欢迎大师！</ p >
        < p  t-else = " " >欢迎！</ p >
    </ div >

**t-att-xxx**动态属性,这个里类似于原生的自定义属性

< div  t-att-data-action-id = " id " /> 
    < div  t-att-foo = " false " />   
    < div  t-att = " {'a': 1, 'b': 2} " /> 
    < div  t-att = " ['a', 'b'] " /> 
    < div  class = " a "  t-att-class = " {'b': true} " />

**t-tag** 标签

<t t-tag="tag">
        <span>content</span>
    </t>

这里渲染时会降t-tag的标签渲染为div,

**t-foreach** 这里是循环指令,类似于v-for ,

<div>
        <span t-if="somecondition">Some string</span>
        <ul t-else="">
            <li t-foreach="messages" t-as="message">
                <t t-esc="message"/>
            </li>
        </ul>
    </div>

**t-call** 渲染子模板 分为静态和动态

####  ####

**静态**

**动态** 通过上下文中的值动态获取

<div t-name="main-template">
        <t t-call="{
       {template}}">
            <em>content</em>
        </t>
    </div>

**t-debug,t-log** 打印数据调试等

**t-translations** 映射字段翻译

const translations = {
      hello: "bonjour",
      yes: "oui",
      no: "non",
    };
    const translateFn = (str) => translations[str] || str;
     
    const app = new App(Root, { templates, tranaslateFn });
    // ...

在xml中的使用

<div>hello</div>
    <div t-translation="off">hello</div>

其他的部分，在第四章中也有相关的讲解，其他API的使用就是hooke的使用，在下一章中会在实体项目中展示一个小的切换组件，切换组件的渲染和事件触发。大家开源小小期待一下哦! mount（）可以跟.then（（）=>\{ \}）方法，可以在这个里面写一些相关的事件等~

公众号搜索神州数码云基地，后台回复Odoo，加入Odoo技术交流群。

[Odoo OWL_1_ OWL]: https://blog.csdn.net/CBGCampus/article/details/124170828
[Odoo OWL_2_OWL]: https://blog.csdn.net/CBGCampus/article/details/124430411
[Odoo OWL_3]: https://blog.csdn.net/CBGCampus/article/details/124473175
[Odoo OWL_4_OWL]: https://blog.csdn.net/CBGCampus/article/details/124746966
[Odoo OWL_5_OWL]: https://blog.csdn.net/CBGCampus/article/details/124880542
[Odoo OWL_6_API]: https://blog.csdn.net/CBGCampus/article/details/124997628?spm=1001.2014.3001.5501
[Odoo OWL_7_OWL]: https://blog.csdn.net/CBGCampus/article/details/125444970
[QWeb]: https://www.odoo.com/documentation/13.0/reference/qweb.html
[cd2493c1bdf546198a5b52207a2e692b.png_pic_center]: https://img-blog.csdnimg.cn/cd2493c1bdf546198a5b52207a2e692b.png#pic_center
[522023a683744e5d819b5ebe302d3915.png_pic_center]: https://img-blog.csdnimg.cn/522023a683744e5d819b5ebe302d3915.png#pic_center