在 thinger.io HTML 小部件的 JavaScript 块中使用 {{value}}

Question

我尝试在 thinger.io 仪表板中使用 JavaScript 代码编写 HTML 小部件 .来自 "thing" 的数据可以在 HTML 中使用，方法是将下一个代码 {{value}} 插入到某些 HTML 标签体中。

但是，我不能在JavaScript块中使用它。

纯 HTML 小部件：

例如在 HTML 小部件中使用：

<h1>Millis data</h1>
<p>Millis value is </p><b>{{value}}</b>

这个的结果

带有 JavaScript 块的小部件（不按需要工作）：

我尝试使用相同的数据进行绘图（Plotly 示例）。我可以在 HTML 标签 id=data 中使用，但是，我不知道如何在 [=81= 中使用这些数据]块。

我的尝试：

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id="data" value={{value}}>Data - {{value}}</div>
<div id="tester" style="width:900px;height:300px;"></div>


<script>
    TESTER = document.getElementById('tester');
    Plotly.newPlot( TESTER, [{
    x: [1, 2, 3, 4, 5],
    y: [1, 2, 4, 8, 16] }], {
    margin: { t: 0 } } );
</script>

生成的小部件： - 图中的数据是硬编码 仅供示例。

我需要帮助将 ```{{value}}`` 数据集成到 thinger.io [=74] 中的 JavaScript 代码中=] 小部件。

Answer 1

似乎没有记录在 HTML 小部件中获取值的方法。

相反，可以使用 MutationObserver 来监听数据 div 的变化。当 div 有更新时，这可以创建 Plotly 图。（您也可以使用 jQuery 来处理更改，但这种方法使用较少的依赖项。）

<div id="data" value={{value}}>Data - {{value}}</div>
<div id="tester" style="width:900px;height:300px;"></div>

<script>
    var createPlot = function(dataEl) {
      let value = dataEl.getAttribute('value');

      console.log(`creating plot with: ${value}`);
      if (value) {
        TESTER = document.getElementById('tester');
        Plotly.newPlot( TESTER, [{
          x: [1, 2, 3, 4, 5],
          y: JSON.parse(value) }], {
          margin: { t: 0 } }
        );
      }
    }

    var dataEl = document.getElementById('data');

    var script = document.createElement('script');
    script.onload = function () {
        createPlot(dataEl);
    };
    script.src = "https://cdn.plot.ly/plotly-latest.min.js";

    document.head.appendChild(script);

    var observer = new MutationObserver(function(mutations) {
        // create plot only if Plotly has loaded
        if (Plotly) {
          createPlot(dataEl);
        }
    });

    // setup the observer
    var target = document.querySelector('#data');
    var config = { attributes: true, attributeFilter: [ 'value'] };
    observer.observe(target, config);

</script>

剧情脚本可能会在div更新后加载。因此，创建情节的触发器可能是脚本加载或 div 变异。无论哪种情况，都需要加载 plotly 并且 div 需要更新。

value 属性也是一个字符串，因此需要使用 JSON.parse().

从字符串转换而来

测试

为了对此进行测试，我创建了一个 HTTP 设备并添加了一个属性和字符串值 [20,41,63,83,103]:

小部件是使用此属性:

配置的

结果：

在 thinger.io HTML 小部件的 JavaScript 块中使用 {{value}}

Using {{value}} in the JavaScript block of the thinger.io HTML widget

html

javascript

widget

iot

纯 HTML 小部件：

带有 JavaScript 块的小部件（不按需要工作）：

我需要帮助将 ```{{value}}`` 数据集成到 thinger.io [=74] 中的 JavaScript 代码中=] 小部件。