Module: ojvcomponent-binding

Oracle® JavaScript Extension Toolkit (JET)



JET Modules

See JET Module Loading for an overview of module usage within JET.


This module contains VComponent property binding decorators.

These decorators are designed to be used on VComponent classes when a particular property value has to propagate to descendant components or a particular property value should be received from a parent component, if that property value is provided by the parent.

Additional considerations:

  • Property binding decorators are only honored when the VComponent custom element is used in a Knockout binding environment.
  • Functional VComponents rely upon the 'options' argument to registerCustomElement for registering this runtime metadata with the custom element. See the registerCustomElement API Doc for additional information.

import { consumedBindings, providedBindings } from "ojs/ojvcomponent-binding";
import { customElement, ExtendGlobalProps } from "ojs/ojvcomponent";
import { Component } from "preact";

type Props = Readonly<{
  labelEdge?: 'inside' | 'start' | 'top';
  readonly?: boolean;

// Indicate that the component's 'labelEdge' and 'readonly' properties will consume
// the 'containerLabelEdge' and 'containerReadonly' variable values, respectively,
// provided by the parent.
@consumedBindings( { labelEdge: { name: 'containerLabelEdge' },
                     readonly: { name: 'containerReadonly' }
                   } )
// Indicate that the component will provide the 'labelEdge' and 'readonly' property values
// under different keys and with different transforms as required for different consumers.
@providedBindings( { labelEdge: [
                                 { name: 'containerLabelEdge', default: 'inside' },
                                 { name: 'labelEdge', default: 'inside', transform: {  top: 'provided', start: 'provided'  } }
                     readonly: [
                                 { name: 'containerReadonly' },
                                 { name: 'readonly' }
                   } )
class FormSubsectionComponent extends Component<ExtendGlobalProps<Props>> {
  static defaultProps = {
    labelEdge: 'inside',
    readonly: false

  render(props: Props) {
    return <div>Label position = {props.labelEdge}, sub-section is {props.readonly ? 'read only' : 'editable'}</div>;



Class decorator for VComponent specifying that one or more component properties can consume a value provided by an ancestor component. The value will be consumed only if the specified component property's attribute has not been set, i.e. the consumed value is used as a default. The 'name' property should be set to the name of the variable published by an ancestor component that is the source of the consumed value.
Name Type Description
consumes { [key: string]: { name: string } } Object that maps component properties to the names of variables published by an ancestor component.


Class decorator for VComponent specifying that one or more component properties will provide one or more values to be consumed by descendant components. See example above. Provided values will come from the literal attribute values, explicit expression bindings, or implicit (consumed) bindings provided by an ancestor component.
Name Type Description
provides { [key: string]: Array<MetadataTypes.ProvideProperty> } Object that maps component properties to one or more variables published to its descendant components.