HideWhen Component Reference

Related documents

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

Table of Contents

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

Introduction

Syntax

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

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

Usage

HideWhen is often useful in conjunction with ShowWhen to show an error message area when there is an error and show other results when this is no error:
For example:

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

Attributes

The HideWhen 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 HideWhen component accepts all children.

DOM element properties

The HideWhen component is remounted when the hasValue conditions change.

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