如何将 chips/tags 添加到 Node-RED 中的节点属性

Question

我正在 Node-RED 中创建一个 Discord 节点，并希望为节点提供关于它将订阅哪些 Discord 事件的选项。我目前正在尝试使用 MaterializeCSS 库中的芯片 (https://materializecss.com/chips.html)。

按照 Materialize 页面上的示例，这是我当前的属性类型：

<script type="text/javascript">
    RED.nodes.registerType('discordEvents', {
        category: 'config',
        defaults: {
            name: {value:"", required: true},
            events: {value:"", required: true},
        },
        exportable: false,
        label: function() {
            return this.name;
        }
    });
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="application/javascript">
    $('.chips-autocomplete').chips({
        autocompleteOptions: {
            data: {
                'message':null,
                'ready':null
            },
            limit: Infinity,
            minLength: 1
        }
    });
</script>
<script type="text/x-red" data-template-name="discordEvents">
    <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>
    <div class="form-row">
        <label for="node-config-input-events"><i class="icon-tag"></i> Events</label>
        <div class="chips chips-autocomplete" id="node-config-input-events></div>
    </div>
</script>

问题是当我将库加载到脚本中时，Node-RED 编辑器消失了，如果我检查控制台，我看到错误“[node-red/discordEvents] TypeError: $(... ).chips 不是函数

Answer 1

您不能在节点的 html 文件中添加脚本标签。您需要将它们动态加载为节点的 oneditprepare 函数的一部分。

您可以查看 node-red-node-geofence 节点作为示例。

这使用 jquery $.getScript() 函数加载脚本。

如何将 chips/tags 添加到 Node-RED 中的节点属性

How to add chips/tags to a node's properties in Node-RED

html

javascript

node-red