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

我尝试在thinger.io仪表板中使用JavaScript代码编写HTML小部件。通过将下一个代码

{{value}}

插入到某个HTML标记体中，可以在HTML中使用

“thing”

中的数据

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

纯HTML小部件： 例如，在HTML小部件中使用：

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

和生成的小部件： -绘图上的数据仅为硬编码

---

我需要帮助将`{{value}}}`数据集成到thinger.io HTML小部件中的JavaScript代码中。似乎没有在HTML小部件中获取值的文档化方法

相反，可以使用侦听数据div的更改。这可以在div更新时创建Plotly绘图。（也可以使用jQuery处理更改，但这种方法使用较少的依赖项。）

Data-{{value}
var createPlot=函数（dataEl）{
让value=dataEl.getAttribute（'value'）；
log（`creating plot with:${value}`）；
如果（值）{
TESTER=document.getElementById（'TESTER'）；
Plotly.newPlot（测试仪、[{
x:[1,2,3,4,5]，
y:JSON.parse（value）}]{
边距：{t:0}
);
}
}
var dataEl=document.getElementById（'data'）；
var script=document.createElement（'script'）；
script.onload=函数（）{
createPlot（dataEl）；
};
script.src=”https://cdn.plot.ly/plotly-latest.min.js";
document.head.appendChild（脚本）；
var观察者=新的突变观察者（功能（突变）{
//仅当Plotly已加载时创建打印
如果（详细地）{
createPlot（dataEl）；
}
});
//设置观察者
var target=document.querySelector（“#data”）；
var config={attributes:true，attributeFilter:['value']}；
observer.observe（目标，配置）；

更新div后，可以加载plotly脚本。因此，创建绘图的触发器可能是脚本加载或div变异。在任何一种情况下，都需要加载plotly和更新div

value属性也是一个字符串，因此需要使用

JSON.parse（）

将其从字符串转换而来

测试

为了测试这一点，我创建了一个HTTP设备，并添加了一个字符串值为

[20,41,63,83103]

的属性：

小部件是使用以下属性配置的：

结果是：

---

服务器端的{{value}}是否被模板引擎替换？或者是否有一些前端脚本正在运行并进一步替换值？我不知道这一点。我不擅长HTML，JS。我在thinger.io社区问了同样的问题，但还没有得到回答。@noa dev可能是你，或者有人可以建议我如何检查这个问题？你到底想要什么？html中显示的输出是否错误？或者您希望以其他形式显示它，js中的

值
变量在哪里？应用程序SSR或西班牙是否是它根据需要工作的纯HTML-
{{value}}
被“解包”到5个元素的数组中。但是我不能在JS块中使用这个
{{value}}
。我想在JS块中获取
{{value}}
的内容。
<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>

<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>