ThingsBoard教程（十四）：部件库基本JS函数API解释，及变量的使用，显示_专栏

前言

各位读者好，截止目前，ThingsBoard系列文章已经做了十篇，分别是

上一篇TB教程我们讲解了部件库的一些基本API，这些API大多是静态的变量，当如果我们要开发更为复杂的部件，还需要知道部件提供的JS 接口。为了实现一个新的部件，我们还需要一些JavaScript让部件的功能更加强大，比如为按钮添加一个点击事件，比如监听部件的大小改变，以及或我们的部件配置数据。这些函数是可选的，你可以使用，也可以不使用。每一个函数都实现了一个部件的特殊行为，下面我们一起来认识一下这些函数吧。

onInit()

部件加载完毕后第一个触发的函数，用于部件的初始化。在触发该函数时，表明部件的dom已经准备好，可以放心地获取，使用dom元素。可以在该函数里处理小部件设置和初始订阅信息。比如为一个按钮增加一个点击事件。

onDataUpdated()

当部件订阅的数据更新或会触发该函数，最新的数据（由defaultSubscription object定义的）能够被访问从部件的上下文里。如下图的报警表格，就是使用了该方法。才能保证显示最新的数据。

onResize()

当组件调整了大小后，该函数会被触发。最新的height，width将被赋值到部件的上下中 ctx中。下图的控制面板，就是使用了该函数，能够保证控制台能够跟随窗口缩放改变大小。

onEditModeChanged()

当仪表盘编辑模式被改变时调用，最新的模式被ctx 的 isEdit 函数接收

onMobileModeChanged()

当仪表盘的宽度低于手机的像素值时，会触发该函数，最新的状态被ctx 中的isMobile 属性接收。

onDestroy()

当部件的节点被销毁是触发，应该在此函数里清空所有不必要的资源。

getSettingsSchema()

改函数会返回一个部件设置的json对象，它是在 Setting tab中设置的 Settings schema section。

getDataKeySettingsSchema()

可选函数，从 Settings schema section. 对象中，返回一个特定key的数据。

typeParameters()

返回部件类型的参数。用于描述部件数据源的参数。请参阅 Type parameters object.

actionSources()

返回一个map对象，用于定义部件的额外操作，有用户定义的。请参阅 Action sources object.

下面演示一下如何将数据显示在html中，创建一个静态页面的组件。 html

<div>
    <div *ngFor="let dataKeyData of testdata" >
         <p>name: {{dataKeyData.name}}</p>
         <p>age: {{dataKeyData.age}}</p>
         <p>sex: {{dataKeyData.sex}}</p>
    </div>
</div>

self.onInit = function() {
    self.ctx.$scope.testdata = [
        {name: 'fizz', age:29, sex:'meal'}
     ]
}

编辑完成后，点击保存。就会显示以下页面。在这里插入图片描述

这里涉及一点点angular的技术，在html中展示一个变量需要使用 {{变量名}} 这种写法。当然变量并必须被声明在 self.ctx.$scope 下

遍历一个数组使用 *ngFor="let dataKeyData of testdata" testdata 是 self.ctx.$scope 下的变量。dataKeyData 是每一个资源

如果你要为某一个div或者button 增加点击事件，那么就比较麻烦，需要在部件的高级功能中增加action。这一部分我们下一章节来介绍。

学习是持之以恒，循序渐进的。

好了，本篇的内容就到这里。对你有帮助的话，就请点一个赞吧。

声明：本文内容由易百纳平台入驻作者撰写，文章观点仅代表作者本人，不代表易百纳立场。如有内容侵权或者其他问题，请联系本站进行删除。