如何在 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-action
、get-publisher-action
、get-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>
我正在寻找一种生成方法,最好是从 <script type="text/javascript">
部分生成 node-red node html definition file 的 <script type="text/html">
部分。
背景语境
我正在创建大量节点-红色节点来访问 and/or 并为 API 提供服务。 API 对其代表的不同资源遵循类似的模式,就像您对 REST API 的期望一样。这会导致许多看起来相似的节点,例如:get-book-action
、get-publisher-action
、get-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>