Recognise visibility attributes

[Vheissu]

Visibility attributes in Aurelia, specifically in the HTML views for either conditionally removing and adding an element in the DOM or conditionally showing and hiding it.

• Recognise if.bind attribute
• Recognise show.bind attribute
• Code insight for variable/boolean value
• Code insight for expression

Code examples

if.bind="myVariable"
if.bind="!myVariable"
if.bind="someVariable == 'this-string-value'"
if.bind="someVariable == 'this-string-value' || someVariable == 'another value'"

show.bind="myVariable"
show.bind="!myVariable"
show.bind="someVariable == 'this-string-value'"
show.bind="someVariable == 'this-string-value' || someVariable == 'another value'"

Notes:

if.bind inserts and removes the element from the DOM depending whether or not the supplied boolean value is truthy or falsy, also supports expressions.

show.bind simply does a display: none and display: initial behind the scenes. The element always remains in the DOM.