Question

在FreeBoard中创建HTML小部件时，会显示以下文本：

可以是文字HTML，也可以是输出HTML的JavaScript。

我知道我可以执行以下操作来返回带有数据的HTML，但如果我想做更复杂的事情，我更喜欢使用文字HTML

返回带数据的HTML

return "<div style='color: red'>This is a red timestamp: " + datasources["DS"]["Timestamp"] + "</div>"

没有数据的文字html

<div style='color: red'>
  This is red text.
</div>
<div style='color: blue'>
  This is blue text.
</div>

这两项工作。我的问题是，如何将数据源中的数据插入到文字html示例中？

有关更多上下文，以下是编辑器顶部的内容：

每次更新此处引用的数据源时，都会重新评估此javascript，并在窗口小部件中显示return的值。您可以假设此javascript包含在function(datasources)形式的函数中，其中datasources是javascript对象的集合（由其名称键控），对应于数据源中的最新数据。

这是默认文字：

// Example: Convert temp from C to F and truncate to 2 decimal places.
// return (datasources["MyDatasource"].sensor.tempInF * 1.8 + 32).toFixed(2);

Answer 1

我不知道干舷框架，但如果您的浏览器支持要求允许，通用解决方案将是使用HTML5模板。

function supportsTemplate() {
  return 'content' in document.createElement('template');
}

if (supportsTemplate()) {
  alert('browser supports templates');
} else {
  alert('browser does not support templates');
}

var template = document.querySelector('#timestamp-template');

var timestamp = template.content.querySelector('.timestamp');
timestamp.innerHTML = new Date().toLocaleString();

var clone = document.importNode(template.content, true);

var output = document.querySelector('#output');
output.appendChild(clone);

<template id="timestamp-template">
  <div style='color: red' class="timestamp">
    This is default red text.
  </div>
  <div style='color: blue'>
    This is blue text.
  </div>
</template>


<div id="output"></div>

显然，您需要调整此策略以支持任何数据源并转换您的项目需求。

不支持HTML5 template元素，您也可以使用<script type="text/template">。

Answer 2

以下是如何将数据源插入HTML小部件的示例：

var LVL = datasources["GL"]["Level"];
return `<div style="width: 200px; height: 200px;background:rgb(242,203,56);"></style>
<svg width=200 height=`+LVL+`><rect width=100% height=100% fill=grey></svg>
</div>`;

添加＆＃34;文字HTML＆＃34;使用来自数据源的数据的HTML小部件？

2 个答案: