节点的属性由其 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> Prefix</label>
<input type="text" id="node-input-prefix">
</div>
模板应包含一个 <input>
元素,其 id
设置为 node-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
数组中的每个属性,它会查找一个 <input>
元素,其 id
设置为 node-input-<propertyname>
,或者对于配置节点,设置为 node-config-input-<propertyname>
。然后,此输入会自动填充属性的当前值。当编辑对话框关闭时,属性会取输入中的任何值。
有关编辑对话框的更多信息可在此处获取。
默认行为在许多情况下都适用,但有时需要定义一些特定于节点的行为。例如,如果属性无法作为简单的 <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 政策