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
Note that if you want to build an HTML table using <oj-bind-for-each> element the html content must be parsed
by
HtmlUtils.stringToNodeArray() method. Keep in mind that the composite
views and the oj-module views that are loaded via ModuleElementUtils are already using that method. Thus to create
a table you can either place the content into a view or call HtmlUtils.stringToNodeArray() explicitly to process the content.
<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>