如何在 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 is not一个函数”

Answer 1

您不能在节点的 html 文件中添加类似的脚本标签。您需要将它们作为节点oneditprepare功能的一部分动态加载。您可以查看node-red-node-geofence节点作为示例。这使用 jquery$.getScript()函数加载脚本。