Odoo 自定义Widgets 基础教程(章节1)

  1. 云栖社区>
  2. 博客>
  3. 正文

Odoo 自定义Widgets 基础教程(章节1)

openerp.hk 2018-07-11 14:39:34 浏览1672
展开阅读全文

大家好,

此次,我们主要讲解 Odoo 中的Widgets。

网上、论坛里很多提及Widget的文章,但很少说Odoo自定义Widget 是如何实现的,这一直是大家所苦恼的地方。本章,将对Odoo中的Widget 进行基础讲解。

首先, Widget【挂件】产生的目的,是为了方便后端开发人员在不熟悉JavaScripts 的情况下,能快速地实现前端视图展示。

我们来看看Widget 所在的目录:

/addons/web/src/static/src/js/core/widget.js

其次,要理解Widget 原理,就是通过js把现有视图或者DOM一类对象进行渲染。所有代码都在前端!就是说,视图是通过客户端来渲染完成的!

这里最核心的一段代码:

var Widget = core.Class.extend(mixins.PropertiesMixin, ServicesMixin,{ 

.......定义各种方法.......

}

方法说明及解释如下:

init: function (parent)
构造部件并设置父节点;

*父节点的意义在于将当前实例绑定到给定的小部件实例。可以为空。当通过调用destroy方法时,当此挂件实例将被摧毁。

willStart: function ()
方法在“初始化 init”和“开始”之间调用。执行渲染和启动方法所需的异步调用。

destroy: function ()
摧毁当此挂件实例

appendTo: function (target)
渲染当前的小部件并将其附加到给定的jQuery对象或控件上。
target 为jQuery对象或控件实例。

prependTo: function (target) {},
渲染当前的小部件并将其预置到给定的jQuery对象或控件上。
target 为jQuery对象或控件实例。
append()和prepend()的作用(区别)

append()用于在被选元素的结尾插入元素。
prepend()用于在被选元素的开头插入元素。

看下面的HTML代码

<div id="test">
  <p>a</p>
</div>

使用 append( ) 和 prepend( )添加元素

$(document).ready(function(){
    $("#test").append("<p>b</p>") //使用append()添加 b 段落
    $("#test").prepend("<p>c</p>") //使用 prepend()添加 c 段落
})

效果如下

<div id="test">
<p>c</p>
<p>a</p>
<p>b</p>
</div>

insertAfter: function (target) { },

insertAfter()函数用于将所有匹配元素插入到指定元素之后的位置:

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p>
<!--以上是jQuery代码执行前的html内容-->
<script type="text/javascript">
$('<!--插入到p元素之后的位置-->').insertAfter( "p" );
// 其返回值就是匹配插入内容(两个注释元素'<!--插入到p元素之后的位置-->')的jQuery对象
</script>
<!--以下是jQuery代码执行后的html内容-->

<p>段落文本1<span></span></p><!--插入到p元素之后的位置-->
<p>段落文本2<span></span></p><!--插入到p元素之后的位置-->

insertBefore: function (target) { }

insertBefore()函数用于将所有匹配元素插入到指定元素之前的位置:

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p>
<!--以上是jQuery代码执行前的html内容-->
<script type="text/javascript">
$('<!--插入到p元素之前的位置-->').insertBefore( "p" );
// 其返回值就是匹配插入内容(两个注释元素'<!--插入到p元素之前的位置-->')的jQuery对象
</script>
<!--以下是jQuery代码执行后的html内容-->

<!--插入到p元素之前的位置--><p>段落文本1<span></span></p>
<!--插入到p元素之前的位置--><p>段落文本2<span></span></p>

attachTo: function (target) { }
将当前挂件附加到DOM元素上
【这也是odoo field中添加 widgets 后,可以对字段进行渲染的核心】

var self = this;
        this.setElement(target.$el || target);
        return this.willStart().then(function () {
            return self.start();
        });

replace: function (target) {}
渲染当前窗口挂件并替换给定的jQuery对象

start: function () {}

此方法一般是在渲染完成后调用。主要用于绑定动作,执行异步操作,调用动作等。

一般来说,此方法应该返回一个可以传递到$.when()的对象来通知调用方这个小挂件已经初始化

renderElement: function () {},
replaceElement: function ($el) { }
setElement: function (element) {}

大同小异,最后三种方法留给大家去探索。

网友评论

登录后评论
0/500
评论
openerp.hk
+ 关注