docs • api • ui• typedinput

- 编辑器
- APIs
- RED.actions
- RED.events
- RED.notify
- RED.sidebar
- Widgets
- 自动补全
- EditableList
- SearchBox
- TreeList
- TypedInput
- Themes
- 主题插件

TypedInput 组件

用于替代常规的组件，允许选择值的类型，包括字符串、数字和布尔类型等选项。

选项
方法
事件
类型
示例
运行时处理类型化值

选项

default

类型: 字符串

如果定义，当typeField未设置时，将设置输入的默认类型。

$(".input").typedInput({
    default: "msg"
});

types

类型：数组

设置该元素将提供的类型列表。

该选项的值是一个字符串标识符数组，用于预定义类型以及任何自定义类型的TypeDefinition对象。

预定义的类型包括：

标识符	描述
`msg`	a `msg.` property expression
`flow`	a `flow.` property expression
`global`	a `global.` property expression
`str`	a String
`num`	a Number
`bool`	a Boolean
`json`	a valid JSON string
`bin`	a Node.js Buffer
`re`	a Regular Expression
`jsonata`	a Jsonata Expression
`date`	the current timestamp
`env`	an environment variable
`node`	a `node.` property expression
`cred`	a secure credential

$(".input").typedInput({
    types: ["msg","str"]
});

typeField

类型: CSS选择器

在某些情况下，可能需要预先存在一个元素来存储typedInput的类型值。此选项允许提供这样一个现有元素。当typedInput的类型发生变化时，所提供的输入元素的值也会相应改变。

$(".input").typedInput({
    typeField: ".my-type-field"
});

在Node-RED节点中使用时，可以通过在节点的defaults对象中添加条目，将此值存储为节点属性。这样可以确保类型与值一起保存在节点配置中。

<div class="form-row">
    <label>Example:</label>
    <input type="text" id="node-input-myField">
    <input type="hidden" id="node-input-myFieldType">
</div>

RED.nodes.registerType('example', {
    defaults: {
        myField: { value: "" },
        myFieldType: { value: "str" }
    },
    ...
    oneditprepare: function () {
        $("#node-input-myField").typedInput({
            typeField: "#node-input-myFieldType"
        });
    }
})

方法

disable( state )

自 Node-RED 1.2.7 起

在当前启用时禁用typedInput。

可选参数 state 可用于切换 typedInput 的禁用/启用状态。如果 state 为 true，该元素将被禁用，否则将被启用。

$(".input").typedInput('disable');

disabled()

自 Node-RED 1.2.7 起

返回值: 布尔值

获取当前typedInput是否处于禁用状态。

$(".input").typedInput('disabled');

enable()

自 Node-RED 1.3.3 版本起

在当前禁用状态下启用typedInput。

$(".input").typedInput('enable');

hide()

在当前可见时隐藏typedInput。

$(".input").typedInput('hide');

show()

当当前隐藏时显示typedInput。

$(".input").typedInput('show');

type()

返回: 字符串

获取typedInput中所选类型。

var type = $(".input").typedInput('type');

type( type )

设置typedInput的选定类型。

$(".input").typedInput('type','msg');

types( types )

设置typedInput提供的类型列表。请参阅types选项的说明。

$(".input").typedInput('types',['str','num']);

validate()

返回值: 布尔值

触发对typedInput的类型/值进行重新验证。每当类型或值发生变化时，这会自动发生，但此方法允许手动运行它。

var isValid = $(".input").typedInput('validate');

value()

返回：字符串

获取typedInput的值。

var value = $(".input").typedInput('value');

value( value )

设置typedInput的值。

$(".input").typedInput('value','payload');

width( width )

设置typedInput的宽度。

$(".input").typedInput('width', '200px');

事件

change( event, type, value )

当输入的类型或值发生变化时触发。

$(".input").on('change', function(event, type, value) {} );

注意： value 属性是在 Node-RED 1.3 版本中添加的

类型

TypeDefinition

一个TypeDefinition对象描述了可由typedInput元素提供的类型。

它是一个具有以下属性的对象：

属性	类型	必填	描述
`value`	string	yes	The identifier for the type
`label`	string		A label to display in the type menu
`icon`	string		An icon to display in the type menu. This can be either an image url, or a FontAwesome 4 icon, for example `"fa fa-list"`.
`options`	array		If the type has a fixed set of values, this is an array of string options for the value. For example, `["true","false"]` for the boolean type.
`multiple`	boolean		If `options` is set, this can enable multiple selection of them.
`hasValue`	boolean		Set to `false` if there is no value associated with the type.
`validate`	function		A function to validate the value for the type.
`valueLabel`	function		A function that generates the label for a given value. The function takes two arguments: `container` - the DOM element the label should be constructed in, and `value`.
`autoComplete`	function		Since 2.1.0. If set, enable autoComplete on the input, using this function to get completion suggestions. See autoComplete for details. This option cannot be used with `options`, `hasValue=false` or `valueLabel`

示例

内置字符串、数字、布尔类型

<input type="text" id="node-input-example1">

$("#node-input-example1").typedInput({
    type:'str',
    types:['str','num','bool']
})

消息属性

<input type="text" id="node-input-example2">

$("#node-input-example2").typedInput({
    type:'msg',
    types:['msg']
})

流程/全局上下文属性

<input type="text" id="node-input-example3">

$("#node-input-example3").typedInput({
    type:'flow',
    types:['flow','global']
})

从选项列表中选择

<input type="text" id="node-input-example4">

$("#node-input-example4").typedInput({type:"fruit", types:[{
    value: "fruit",
    options: [
        { value: "apple", label: "Apple"},
        { value: "banana", label: "Banana"},
        { value: "cherry", label: "Cherry"},
    ]
}]})

从选项列表中选择多个项目

<input type="text" id="node-input-example5">

$("#node-input-example5").typedInput({type:"fruit", types:[{
    value: "fruit",
    multiple: true,
    options: [
        { value: "apple", label: "Apple"},
        { value: "banana", label: "Banana"},
        { value: "cherry", label: "Cherry"},
    ]
}]})

运行时处理类型化值

Due to the way the typedInput enhances a regular HTML , its value is stored as a string. For example, booleans are stored as "true" and "false".

当存储为节点属性时，节点的运行时部分需要解析字符串以获取类型化值。

提供了一个实用函数来处理TypedInput内置的类型。

RED.util.evaluateNodeProperty(value, type, node, msg, callback)

属性	类型	必填	描述
`value`	string	yes	The property to evaluate
`type`	string	yes	The type of the property
`node`	Node	yes, for certain types	The node evaluating the property
`msg`	Message Object	yes, for certain types	A message object to evaluate against
`callback`	Callback	yes, for `flow`/`global` types	A callback to receive the result

对于大多数类型，该函数可以同步使用而无需提供回调函数。

const result = RED.util.evaluateNodeProperty(value, type, node)

对于msg类型，还应提供消息对象：

const result = RED.util.evaluateNodeProperty(value, type, node, msg)

要处理flow和global上下文类型，由于上下文访问的异步特性，需要同时提供节点以及回调函数：

RED.util.evaluateNodeProperty(value, type, node, msg, (err, result) => {
    if (err) {
        // Something went wrong accessing context
    } else {
        // Do something with 'result'
    }
})