节点属性

节点的属性由其 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> 前缀</label>
         <input type="text" id="node-input-prefix">
     </div>
    

    模板应包含一个 id 设置为 node-input-<propertyname><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 已经被使用。其他的保留供将来使用。
  • idtypewiresinputsoutputs

如果节点希望允许其提供的输出数量可配置,则 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 数组中的每个属性,它会查找一个 id 设置为 node-input-<propertyname>node-config-input-<propertyname><input> 元素(对于配置节点而言)。然后该输入将自动填充当前属性的值。当编辑对话框关闭时,属性将取输入中的任何值。

有关编辑对话框的更多信息,请参见 这里

自定义编辑行为

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

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

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

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