节点的属性由其 HTML 定义中的 defaults
对象定义。这些属性在运行时创建节点实例时传递给节点构造函数。
在 创建你的第一个节点部分 的示例中,节点有一个名为 name
的属性。在本节中,我们将为节点添加一个名为 prefix
的新属性:
defaults
对象添加一个新条目:
defaults: {
name: {value:""},
prefix: {value:""}
},
该条目包括当这种类型的新节点被拖放到工作区时使用的默认 value
。
<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>
元素。
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
: (字符串) 可选 如果该属性是指向 配置节点,则识别节点的类型。有一些保留的属性名称 不得使用。它们是:
x
、y
、z
、d
、g
、l
已经被使用。其他的保留供将来使用。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
数组中的每个属性,它会查找一个 id
设置为 node-input-<propertyname>
或 node-config-input-<propertyname>
的 <input>
元素(对于配置节点而言)。然后该输入将自动填充当前属性的值。当编辑对话框关闭时,属性将取输入中的任何值。
有关编辑对话框的更多信息,请参见 这里。
默认行为在许多情况下有效,但有时需要定义某些节点特定的行为。例如,如果某个属性无法作为简单的 <input>
或 <select>
进行正确编辑,或者如果编辑对话框的内容本身需要根据所选选项具有某些行为。
节点定义可以包含两个函数来自定义编辑行为。
oneditprepare
在对话框显示之前立即被调用。oneditsave
在编辑对话框确认时被调用。oneditcancel
在编辑对话框被取消时被调用。oneditdelete
在配置节点的编辑对话框中按下删除按钮时被调用。oneditresize
在编辑对话框调整大小时被调用。例如,当注入节点配置为重复时,它将配置存储为类似 cron 的字符串:1,2 * * * *
。节点定义了一个 oneditprepare
函数,可以解析该字符串并呈现更友好的用户界面。它还具有一个 oneditsave
函数,将用户选择的选项编译回相应的 cron 字符串。
版权所有 OpenJS Foundation 和 Node-RED 贡献者。保留所有权利。OpenJS Foundation 拥有并使用注册商标。有关 OpenJS Foundation 的商标列表,请参阅我们的 商标政策 和 商标列表。未在 OpenJS Foundation 商标列表 中列出的商标和徽标是其各自持有者的商标™或注册商标®。使用它们并不意味着与它们有任何关联或认可。
OpenJS Foundation | 使用条款 | 隐私政策 | OpenJS Foundation 章程 | 商标政策 | 商标列表 | Cookie 政策