If Directive

A template node (and all it's children) can be conditionally included or excluded using the if, elseif and else directives.

Unlike the display directive which simply hides an element, the if directive completely removes it.

#`if,` `elseif and` `else Directives`

The if directive can be used to conditional include a template node.

The value of the if directive is the condition to be tested and if it evaluates to a truthy value, the node and all its child nodes are included.

{ 
    type: "div",
    text: "I'm here!",
    if: c => c.showIt,
},

The else directive can be used to show alternate content when if directive's condition is false.

The value of an else directive is ignored but should be a truthy value. (eg: else: true)

{ 
    if: c => c.showIt,
    type: "div",
    text: "I'm here!",
},
{
    else: true,
    type: "div",
    text: "So am I",
},

You can also include one or more elseif directives:

{ 
    if: c => c.selection == "apples",
    type: "div",
    text: "Apples are Red",
},
{
    elseif: c => c.selection == "pears",
    type: "div",
    text: "Pears are Green",
},
{
    else: true,
    type: "div",
    text: "Bananas are yellow",
},

Nodes with if, elseif and else directives must all follow each other consecutively in the containing child node array.

#Static Conditions

Although not commonly used, an if directive can be hard coded as true or false.

This can be handy for including or excluding content based on conditions like build environment.


"Before →",
{ 
    if: false,
    type: "div",
    text: "Nothing to See Here",
},
"← After",

#Update Semantics

When a template's DOM tree is updated any conditional directives are re-evaluated by calling their condition callbacks. This is done in order from the first if directive through any elseif directives and to the last else directive (if present).

The first directive whose condition evaluates to true becomes the "active branch".

If the active branch is the same, the existing DOM tree of that branch is maintained.

If the active branch is different:

the DOM tree of the old branch is removed from the document and released
the DOM tree of the new branch is created and added to the document

In either case (same or different active branch) the eventual active branch is then updated so any dynamic callback properties in that branch are also reflected in the DOM.

If any of the branches contain bind directives those element references will be set to null when the branch is removed and restored to the element reference when the branch is re-created.

#CSS Transitions

Condition directives can be used in conjunction with CodeOnly CSS transitions to produce animation effects when the active branch changes.

See Transitions for more on this.

If Directive

#if, elseif and else Directives

#Static Conditions

#Update Semantics

#CSS Transitions

#`if,` `elseif and` `else Directives`