Module: ojvcomponent-binding

Oracle® JavaScript Extension Toolkit (JET)
11.1.0

F37999-01

QuickNav

JET Modules

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

Description

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.

Note that the property binding decorators can only be used by VComponents that have Knockout binding applied to them.


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

type Props = {
  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' }
                               ]
                   } )
@customElement('my-form-subsection-component')
class FormSubsectionComponent extends Component<ExtendGlobalProps<Props>> {
  static defaultProps = {
    labelEdge: 'inside',
    readonly: false
  };
  ...
}

Decorators

consumedBindings(consumes)

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.
Parameters:
Name Type Description
consumes { [key: string]: { name: string } } Object that maps component properties to the names of variables published by an ancestor component.

providedBindings(provides)

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.
Parameters:
Name Type Description
provides { [key: string]: Array<MetadataTypes.ProvideProperty> } Object that maps component properties to one or more variables published to its descendant components.