Menu

bound-if

An HTML content command that can be used in screens to have its host element become conditional based on a Screen data variable with a Boolean value.

This command's primary attribute expression should refer to a Screen data variable and resolve into a Boolean. When the resolved value is a Boolean value of true, the host element will be in the document. Whenever the value is false, the host element will be gone. If evaluated in uneditable content (a composeContent command whose editable attribute is false does this), this content command will work in the exact same way as if.

This command has a priority of 600 among the other content commands of the "bound" series, but a priority of 0 compared to other HTML content commands. However, in HTML content declared as uneditable its priority rises to 1000 to match the priority of if.

Secondary attributes

bound-if-of-repeat


Required
Value type
EL-evaluated
No
String
No
This attribute can be used to link this bound-if to a bound-repeat, allowing this command to read that bound-repeat's contents even if this command's host element is not inside bound-repeat's host element. The resolved value of this attribute should match the bound-repeat-name value of the bound-repeat that this command should be linked to.

When using this link, the primary attribute expression of bound-if cannot refer to the Collection item by the bound-repeat-var of the linked repeat. The expression has to use one of two possible fixed variable names for the item; which one to use depends on what kind of functionality is sought:
  • targetItem - The host input reads a value of the currently targeted item of the bound-repeat's Collection, switching as the targeted item changes. 
  • nextItem - The host input reads a value for the next item to be added to the bound-repeat's Collection. 
Note that this attribute has no effect if this command is evaluated in uneditable content.

Examples

The bound-if command being able to make its host element disappear and appear dynamically is its notable addition compared to the basic if content command. This can be observed by having another bound content command modify the value of the variable bound-if is bound to. A common example would be to have a checkbox with bound-value bound to that same variable:

<input type="checkbox" bound-value="showText"/>
<div bound-if="showText">
  bound-if is an HTML content command that makes this text conditional. 
</div>   

Comments

0 comments