1

在 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);
4

2 回答 2

0

我不知道 freeboard 框架，但如果您的浏览器支持要求允许，一个通用的解决方案是使用 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>

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

如果不支持 HTML5template元素，您也可以使用<script type="text/template">.

于 2015-07-23T16:46:58.683 回答
-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>`;
于 2019-04-04T12:12:01.097 回答