节点属性

节点的属性由其 HTML 定义中的 defaults 对象定义。这些属性会在运行时创建节点实例时传递给节点构造函数。

创建您的第一个节点部分的示例中,节点只有一个名为 name 的属性。在本节中,我们将为节点添加一个名为 prefix 的新属性。

  1. defaults 对象添加新条目
     defaults: {
         name: {value:""},
         prefix: {value:""}
     },
    

    该条目包含当这种类型的新节点被拖到工作区时要使用的默认 value

  2. 为节点的编辑模板添加一个条目
     <div class="form-row">
         <label for="node-input-prefix"><i class="fa fa-tag"></i> Prefix</label>
         <input type="text" id="node-input-prefix">
     </div>
    

    模板应包含一个 <input> 元素,其 id 设置为 node-input-<属性名>

  3. 在节点中使用属性
     function LowerCaseNode(config) {
         RED.nodes.createNode(this,config);
         this.prefix = config.prefix;
         var node = this;
         this.on('input', function(msg) {
             msg.payload = node.prefix + msg.payload.toLowerCase();
             node.send(msg);
         });
     }
    

属性定义

defaults 对象中的条目必须是对象,并且可以具有以下属性:

  • value : (任意类型) 属性的默认值。
  • required : (布尔值) 可选 属性是否必需。如果设置为 true,则当其值为 null 或空字符串时,属性将无效。
  • validate : (函数) 可选 用于验证属性值的函数。
  • type : (字符串) 可选 如果此属性是指向配置节点的指针,则此属性标识节点的类型。

保留属性名称

有一些保留的属性名称不得使用。这些是:

  • 任何单个字符 - xyzdgl 已被使用。其他保留供将来使用。
  • id, type, wires, inputs, outputs

如果节点希望允许其提供的输出数量可配置,则可以将 outputs 包含在 defaults 数组中。函数节点是此工作方式的一个示例。

属性验证

编辑器会尝试验证所有属性,以在用户输入无效值时发出警告。

required 属性可用于指示属性必须非空且非空白。

如果需要更具体的验证,可以使用 validate 属性提供一个函数来检查值是否有效。该函数会传递值,并应返回 true 或 false。它在节点的上下文中调用,这意味着 this 可以用来访问节点的其他属性。这允许验证取决于其他属性值。在编辑节点时,this 对象反映节点的当前配置,而不是当前表单元素的值。验证器函数应尝试访问属性配置元素,并将 this 对象作为备用方案,以实现正确的用户体验。

提供了一组常见的验证函数。

  • RED.validators.number() - 检查值是否为数字
  • RED.validators.regex(re) - 检查值是否匹配提供的正则表达式

两种方法——required 属性和 validate 属性——在 UI 中的反映方式相同。当值无效或缺失时,节点上的缺失配置标记会被触发,并且相应的输入框会用红色边框包围。

以下示例展示了如何应用这些验证器。

defaults: {
   minimumLength: { value:0, validate:RED.validators.number() },
   lowerCaseOnly: {value:"", validate:RED.validators.regex(/[a-z]+/) },
   custom: { value:"", validate:function(v) {
      var minimumLength=$("#node-input-minimumLength").length?$("#node-input-minimumLength").val():this.minimumLength;
      return v.length > minimumLength
   } }
},

请注意,只有当 custom 属性的长度大于 minimumLength 属性的当前值或 minimumLength 表单元素的值时,它才有效。

属性编辑对话框

当编辑对话框打开时,编辑器会用节点的编辑模板填充对话框。

对于 defaults 数组中的每个属性,它会查找一个 <input> 元素,其 id 设置为 node-input-<propertyname>,或者对于配置节点,设置为 node-config-input-<propertyname>。然后,此输入会自动填充属性的当前值。当编辑对话框关闭时,属性会取输入中的任何值。

有关编辑对话框的更多信息可在此处获取。

自定义编辑行为

默认行为在许多情况下都适用,但有时需要定义一些特定于节点的行为。例如,如果属性无法作为简单的 <input><select> 进行正确编辑,或者如果编辑对话框内容本身需要根据所选选项具有某些行为。

节点定义可以包含两个函数来定制编辑行为。

  • oneditprepare 在对话框显示之前立即调用。
  • oneditsave 在编辑对话框确认时调用。
  • oneditcancel 在编辑对话框取消时调用。
  • oneditdelete 在配置节点的编辑对话框中按下删除按钮时调用。
  • oneditresize 在编辑对话框大小调整时调用。

例如,当注入节点配置为重复时,它将配置存储为类似 cron 的字符串:1,2 * * * *。节点定义了一个 oneditprepare 函数,可以解析该字符串并呈现一个更友好的用户界面。它还有一个 oneditsave 函数,用于将用户选择的选项编译回相应的 cron 字符串。