ShowWhen Component

Related documents

• Component Overview
• Component Reference
• Built-in Components
• Template Markup Language (TML) Reference
• HideWhen Component Reference

Table of Contents

• Introduction
• Attributes
• Children
• Usage
• DOM element properties

Introduction

Syntax

tml`
    <ShowWhen hasValue=stateVariable1>
        ...
    </ShowWhen>
`tml`
    <ShowWhen hasValue="stateVariable1,stateVariable2">
        ...
    </ShowWhen>
`
tml`
    <ShowWhen hasValue=${SV.find(/stateVariable\d+/)}>
        ...
    </ShowWhen>
`

The ShowWhen component displays its children whenever any of the state variables specified by the hasValue attribute have truthy values.
Otherwise, the children are not rendered.

Attributes

The ShowWhen component ignores the standard attributes.

• hasValue
  The hasValue attribute can accept:

  • A string containing the comma-separated public state variable IDs.
  • A View or Model type StateVar object.
  • A RegExp to match against a state variable ID.
  • A function that takes a single state variable argument. The function returns true if the state variable should be monitored for change
  • An array of a mix of ID strings, View or Model type StateVar objects, and SvMonitor objects.

  The hasValue attribute will accept the output of SV.find(). Any argument acceptable to SV.find() is acceptable as a value of the hasValue attribute.

Children

The ShowWhen component accepts all children.

Usage

ShowWhen is often useful to show an error message area when there is an error and hide it when there is no error. For example:

tml`
	<ShowWhen hasValue=myPage_errorMsg>
		<div>Error: {{myPage_errorMsg}}</>
	</ShowWhen>
`

DOM element properties

The ShowWhen component is remounted when the hasValue conditions change.

• If the hasValue conditions are met, the Component renders the children.
• If the hasValue conditions are not met, the Component renders a single <span> with the class whenMarker. This allows the Component to keep a placeholder for any future template nodes.