JET Binding Elements

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-01

Overview

JET provides a set of binding elements that exist in the DOM only before bindings are applied. After the bindings are applied, the elements are removed from the document's DOM. However, the bindings they have defined will continue to function, i.e they will still be reacting to any changes in binding parameters, etc. These elements are intended to allow declaratively handling logic that would otherwise need to be done programatically, e.g. conditionals, loops, text binding, etc. Binding elements are removed from the DOM after bindings are applied in order to not interfere with page layout.

Note that since binding elements will be removed from the DOM after bindings are applied, for slotting, applications need to wrap binding elements inside another HTML element (e.g. <span>) with the slot attribute. JET binding elements do not support the slot attribute.

Knockout Equivalents

Knockout Binding	JET Equivalent	Notes
attr	:[attribute]="[[attrValue]]", e.g. :id="[[inputId]]"	See the custom element global attribute data binding doc for details.
css	:class="[[classList]]"	Supports the normal space delimited string of classes, an array of classes, or a map of class to boolean values for toggling classes in the DOM. See the custom element class data binding doc for details.
event	on-[event]	No ":" prefix needed even on native HTML elements. The parameters passed to the on- listeners include two additional params. this.clickListener=function(event, data, bindingContext) {..} If the component has its own event equivalent, use those instead. Eg: oj-button should use on-oj-action not on-click. See the custom element event data binding doc for details.
foreach	oj-bind-for-each	See the oj-bind-for-each binding element doc for details.
html	oj-bind-dom	See the oj-bind-dom binding element doc for details.
if	oj-bind-if	See the oj-bind-if binding element doc for details.
template	oj-bind-template-slot if being used inside a composite or oj-module for other cases	See the oj-bind-template-slot binding element and oj-module element doc for details.
text	oj-bind-text	See the oj-bind-text binding element doc for details.
visible	:style.display="[[ CONDITION ? '' : 'none' ]]"	See the custom element style data binding doc for details.