Добавление "буквального HTML" в виджет HTML с данными из источника данных?

Question

При создании HTML-виджета во FreeBoard отображается следующий текст:

Может быть литералом HTML или JavaScript, который выводит HTML.

Я знаю, что могу сделать следующее, чтобы вернуть 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) где источники данных - это набор объектов 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>`;