Javascript ThingsBoard:如何将我的自定义小部件添加到与现有内置小部件相同的仪表板中,而不会导致它们出错?
我使用外部JavaScript资源在Javascript ThingsBoard:如何将我的自定义小部件添加到与现有内置小部件相同的仪表板中,而不会导致它们出错?,javascript,jquery,widget,thingsboard,Javascript,Jquery,Widget,Thingsboard,我使用外部JavaScript资源在ThingsBoard上创建了一个新的旋钮控制小部件。 外部JavaScript资源包括: 和 JavaScript: self.onInit = function() { var $j=jQuery.noConflict(); $j(".knob").knob(); } HTML: 这个小部件本身运行良好。 但是,当添加到仪表板时,也会导致同一仪表板上的其他现有小部件出错 从所附的图像中可以看到,newKnobCo
ThingsBoard
上创建了一个新的旋钮控制小部件。
外部JavaScript资源包括:
和
JavaScript:
self.onInit = function() {
var $j=jQuery.noConflict();
$j(".knob").knob();
}
HTML:
这个小部件本身运行良好。
但是,当添加到仪表板时,也会导致同一仪表板上的其他现有小部件出错
从所附的图像中可以看到,newKnobControl
(这是我创建的自定义小部件)显示并工作。
但是,ThingsBoard上现有的内置旋钮控制小部件无法再正确显示,并且显示TimeSeries栏时也存在错误。
Timeseries Bars错误声明为:小部件错误:TypeError:$。绘图不是函数。
所以,问题是我如何才能将自定义小部件添加到与现有内置小部件相同的仪表板中,而不会对它们造成错误?您的小部件(或小部件配置/资源)正在覆盖小部件工作所需的全局
$
-句柄(通常是jquery)。尝试使用var$jq=jquery.noConflict();但仍然不起作用。我使用这些外部资源和类似于您的仪表板创建了一个小测试小部件。到目前为止,一切似乎都正常。我想我们需要查看widgets代码以进行进一步的调查。可以更改仪表板中小部件的顺序,以确定哪个小部件覆盖了$
-句柄。您还可以尝试使用浏览器的开发人员工具检查$
的实际值。我已经编辑了这个问题,以包含小部件代码。TimeSeries Bars小部件在添加$.noConflict后可以工作,但内置的旋钮控制小部件仍然无法正确显示。您的小部件(或小部件配置/资源)正在覆盖小部件工作所需的全局$
-句柄(通常为jquery)。尝试使用var$jq=jquery.noConflict();但仍然不起作用。我使用这些外部资源和类似于您的仪表板创建了一个小测试小部件。到目前为止,一切似乎都正常。我想我们需要查看widgets代码以进行进一步的调查。可以更改仪表板中小部件的顺序,以确定哪个小部件覆盖了$
-句柄。您还可以尝试使用浏览器的开发人员工具检查$
的实际值。我已经编辑了这个问题,以包含小部件代码。TimeSeries Bars小部件在添加$.noConflict后可以工作,但内置的旋钮控制小部件仍然无法正确显示。
<div class=container>
<input class="knob" data-angleOffset=-125 data-angleArc=250 data-fgColor="#66CC66" value="50">
</div>