Element: <oj-bind-template-slot>

Oracle® JavaScript Extension Toolkit (JET)
7.1.0

F18183-01

QuickNav

Attributes


PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

Version:
  • 7.1.0
Since:
  • 5.1.0
Module:
  • ojcomposite

Module usage

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

Template Slot Binding

The oj-bind-template-slot element is used inside a composite View as a placeholder for stamped child DOM and is a declarative way to define a template slot. Similar to oj-bind-slot-elements, the oj-bind-template-slot has fallback content which should be provided in a template node and will be used when the template has no assigned nodes. The 'name' attribute on an oj-bind-template-slot follows the same rules as an oj-bind-slot where a template slot with a name attribute whose value is not the empty string is referred to as a named slot and a template slot without a name attribute or one whose name value is the empty string is referred to as the default slot where any composite children without a slot attribute will be moved to.

Template Slot Properties

  • A default template slot is a slot element whose slot name is the empty string or missing.
  • More than one template node can be assigned to the same template slot, but only the last will be used for stamping.
  • A template slot can also have a slot attribute and be assigned to another template slot or slot.
  • A template slot can have a default template as its direct child node which will be used to stamp DOM content if it has no assigned nodes. The binding context for the default template is the composite's binding context with the additional data properties.

Assignable Node Properties

  • Template nodes are the only allowed children of template slots.
  • Nodes with slot attributes will be assigned to the corresponding named slots (if present) and all other assignable nodes (Text or Element) will be assigned to the default slot (if present).
  • The slot attribute of a node is only applied once. If the View contains a composite and the node's assigned slot is a child of that composite, the slot attribute of the assigned slot is inherited for the slotting of that composite.
  • Nodes with slot attributes that reference slots not present in the View will not appear in the DOM.
  • If the View does not contain a default slot, nodes assigned to the default slot will not appear in the DOM.
  • Nodes that are not assigned to a slot will not appear in the DOM.

Binding Context

Unlike oj-bind-slot nodes whose children's bindings are resolved in the application's binding context before being slotted, oj-bind-template-slot children are resolved when the composite View bindings are applied and are resolved in the application's binding context extended with additional properties provided by the composite. These additional properties are available on the $current variable in the application provided template node and should be documented in the composite's slot metadata.

Example #1: Basic Usage

Note that the IDs are provided for sample purposes only.

Initial DOM


<demo-list data="{{groceryList}}" header="Groceries">
 <template slot="item" data-oj-as="groceryItem">
   <oj-checkboxset>
     <oj-option value="bought"><oj-bind-text value='[[groceryItem.value]]'></oj-bind-text><oj-option>
   </oj-checkboxset>
 </template>
</demo-list>

View


<table>
  <thead>
    <tr>
      <th>
        <oj-bind-text value="[[$properties.header]]"></oj-bind-text>
      </th>
    </tr>
  </thead>
  <tbody>
    <oj-bind-for-each data="{{$properties.data}}">
      <template>
        <tr>
          <td>
            <!-- Template slot for list items with default template and alias -->
            <oj-bind-template-slot name="item" data={{$current.data}}>
              <!-- Default template -->
              <template data-oj-as="listItem">
                <span><oj-bind-text value='[[listItem.value]]'></oj-bind-text></span>
              </template>
            </oj-bind-template-slot>
          </td>
        </tr>
      </template>
    </oj-bind-for-each>
  </tbody>
</table>

Slots

JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

Default

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

The oj-bind-template-slot default slot is used to specify a fallback template that will be used to stamp child DOM if the slot has no assigned template nodes. While assigned template nodes are executed in an extension of the composite element's binding context, the fallback template is executed in an extension of its own binding context (commonly the binding context of the composite view). As with assigned templated nodes, the extension makes the value of the data attribute available through $current and alias keys. The fallback content also inherits the slot attribute of the oj-bind-template-slot itself.

Attributes

as :string

An optional alias for $current that can be referenced inside the default template DOM. Note that application $current aliasing should be done with the data-oj-as attribute on the template element.
Deprecated:
Since Description
6.2.0 Set the alias directly on the template element using the data-oj-as attribute instead.

data :Object

The object containing additional context variables to extend the stamped template nodes' binding context. These variables will be exposed as variables on $current and aliases.

name :string

The name of the slot.