如何在 node-red html 文件中生成脚本模板元素

How to generate the script template elements in a node-red html file

我正在寻找一种生成方法,最好是从 <script type="text/javascript"> 部分生成 node-red node html definition file<script type="text/html"> 部分。

背景语境

我正在创建大量节点-红色节点来访问 and/or 并为 API 提供服务。 API 对其代表的不同资源遵循类似的模式,就像您对 REST API 的期望一样。这会导致许多看起来相似的节点,例如:get-book-actionget-publisher-actionget-author-action,等等 API 公开的每个方法和资源。

我以这样一种方式编写了我的节点-红色节点,即我可以简单地定义资源列表(即 const resources = ['book', 'author', 'series', 'publisher', ...])并让它循环创建 get 的特定节点,update,等等。我还没有解决的是如何对编辑器模板部分做同样的事情,这就是我问这个问题的原因。

伪例子

我想要这样的东西:

<script type="text/javascript">
(function(RED) {
  const resources = ["author", "book", "publisher", ...];
  resources.forEach(resource => {
    RED.nodes.registerType(`get-${resource}-action`, {...});
    RED.nodes.registerType(`update-${resource}-action`, {...});
    RED.nodes.registerType(`delete-${resource}-action`, {...});
    // other verbs

    // some api to create the editor template script tags
    document.write(`
      <script type="text/html" data-template-name="get-${resource}-action">
        <div class="form-row">
          <label for="node-config-input-name><i class="icon-tag"></i> Name</label>
          <input type="text" id="node-config-input-name">
        </div>
      </script>`);
    // and so on for the other verbs/node types and template types like data-help-name
  });
})(RED);
</script>

node-red 节点的 .html 文件中的脚本块只是作为编辑器页面上 div 的子节点插入到 dom 中。这意味着您可以使用 front-end JavaScript 的全部功能。

我发现实现此目的的方法如下:

<script type="text/javascript">
(function(RED) {
  const resources = ["author", "book", "publisher", ...];
  resources.forEach(resource => {
    RED.nodes.registerType(`get-${resource}-action`, {...});
    RED.nodes.registerType(`update-${resource}-action`, {...});
    RED.nodes.registerType(`delete-${resource}-action`, {...});
    // other verbs

    // We have to split up the <scr and ipt parts as if either the opening or closing
    // tags appear anywhere in this block it will close the js script block
    $(document.currentScript).parent().append(
      '<scr'+`ipt type="text/html" data-template-name="get-${resource}-action">
        <div class="form-row">
          <label for="node-config-input-name><i class="icon-tag"></i> Name</label>
          <input type="text" id="node-config-input-name">
        </div>
      </scr`+'ipt>'
    );
    // and so on for data-help-name and other verbs
  });
})(RED);
</script>