在 thinger.io HTML widget 的 JavaScript 块中使用 {{value}}。

Question

我试着写 HTML小部件 中的JavaScript代码。thinger.io 仪表板。的数据。"thing" 可用于 超文本标记语言 通过插入下一个代码 {{value}} 到某个HTML标签体中。

但是，我不能在 屏蔽JavaScript.

纯HTML小部件。

例如使用在 超文本标记语言 小组件。

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

这个结果

带有JavaScript块的小部件 (顾此失彼):

我试图使用相同的数据进行绘图（Plotly示例）。超文本标记语言 标签 id=data但是，我不知道如何将这些数据使用在 脚本语言 块。

我的尝试。

<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}}``数据整合到JavaScript代码中。thinger.io HTML小部件。

Answer 1

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

相反，它可以使用一个 突变观察者 来监听数据div的变化。(你也可以使用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>

plotly脚本可以在div更新后加载。所以创建情节的触发器可能是脚本加载或者div突变。无论哪种情况，都需要加载 plotly 和更新 div。

值属性也是一个字符串，所以需要使用 JSON.parse().

测试

为了测试这一点，我创建了一个HTTP设备，并添加了一个带有字符串值的属性。[20,41,63,83,103]:

小组件是用这个属性配置的。

结果是：