Flow Control
To use flow control in shadow elements, we can use the following shadow element tags:
<if>
: allows the conditional execution of its body according to the value of the test attribute.<choose>/<when>/<otherwise>
: they are used for logic and flow control, such as Java's switch/case/default statement.
Work with UI components
Continuing with the example from the previous chapter, we will render a menu node upon its sub-menu existence. First we specify whether or not to show Home icon. And if a menu node has a sub-menu, we render it by <nav>
; otherwise render it by <navitem>
. To achieve this, we have to use shadow components for flow control, <if>
, <choose>
, <when>
, and <otherwise>
.
- The
<if>
is just like Java if statement. - The
<choose>
is just like Java switch statement. - The
<when>
is like case statement, and you should specify a data binding expression on test attribute to be evaluated. - The
<otherwise>
works like default case in a switch statement to specify a default action. Now, we can test whether a menu node has a subMenus or not bytest="@load(empty each.subMenus)"
. If it does, create a<nav>
, otherwise create a<navitem>
.
<navbar id="navbar" orient="horizontal" collapsed="false">
<if test="@load(showHome)">
<navitem label="Home" iconSclass="z-icon-home" />
</if>
<forEach items="@load(menuItems)">
<choose>
<when test="@load(empty each.subMenus)">
<navitem label="@load(each.label)" />
</when>
<otherwise>
<nav label="@load(each.label)" iconSclass="@load(each.iconSclass)"/>
</otherwise>
</choose>
</forEach>
</navbar>
But this way we only create a <nav>
without its <navitem>
. We need to traverse each node in its sub-menu and create corresponding components (<nav>
or <navitem>
) which is just like what we would do now for each menu-node. It means we need to reuse this <forEach>
and its child elements.