// To assign a property called mydiv on the binding context that contains a div
// element
<div ref="mydiv"></div>

// Binding using translations
<div>&{person.lastName}</div>

// Binding in textContent
<div>${person.firstName}</div>

// Once binding
<my-component greeting.once="greeting"></my-component>

// One way binding
<my-component value.one-way="person.firstName"></my-component>

// Two way binding
<input value.two-way="person.lastName" />

// Using bind expression
<input value.bind="person.age" type="number" />

// Simple event binding
<button click.call="reset">Reset</button>

// Event binding with muliple parameters
<button click.call="onEvent($event, $context, "Hello World")">Event</button>

// Event binding, targeting component method
<button click.call="[my-component].greet('hello kieran')">Call Greet</button>

// Standard attribute binding
<div data-value.attr="age"></div>

// Toggle attribute using "true" and "false"
<button click.attr.toggle="[this](aria-expanded='true')">Toggle Expanded</button>

// Add and remove attribute using toggle
<button click.attr.toggle="[this](data-hidden)">Toggle Hidden</button>

// Simple conditional attribute binding. Set if value passes, remove if not
<div data-value.if="age < 20 ? 'young'"></div>

// Simple conditional attribute binding with if / else
<div data-value.if="age < 20 ? 'young' : 'old'"></div>

// Attribute case condition binding with default value
<div data-value.case="age < 20: 'young', age < 30: 'mid', default: 'old'"></div>

// Attribute case condition binding without default value
<div data-value.case="age < 20: 'young', age < 30: 'mid'"></div>

<template for="item of items">
    <li>${item.code}</li>
</template>

// Toggle classlist on event
<button click.classlist.toggle="[this]('blue', 'white')"></button>

// Conditional classlist
<div class="color" classlist.if="background == 'red' ? 'red'"></div>

// Using multiple classes
<div classlist.if="color == 'red' ? ['white', 'green'] : ['blue', 'yellow']"></div>

// Classlist case
<div classlist.case="color=='red': 'red', color=='blue': 'blue', default: 'green'">

// Toggle global value
<button click.setvalue="$globals.menuVisible = !$globals.menuVisible">

// Toggle context property
<button click.setvalue="state2 = !state2">

// Simple set value
<button click.setvalue="state = 'on'">

// Conditional set value
<button click.setvalue="state = state == 'on' ? 'off' : 'on'">

// Set context property to element property
<button click.setvalue="state = prop(#input, value, true)">

// Set context property based on element condition
<button click.setvalue="state = prop(#input, value, true)==1 ? 'off' : 'on'">

// Set attribute value 
<button click.setvalue="attr(#static1, data-value, true) = 'on'">

// Set attribute to attribute
<button 
click.setvalue="attr(#static1, data-value, true) = attr($element, data-value, true)">

// Set element property based on this element's property
<input change.setvalue="prop(#input2, value, true) = prop($element, value)"/>

// use event aggregation emit with event key
<button click.emit="my_event">

// emit with parameters
<button click.emit="my_event(title='hello world', $event, contacts=${contacts})">

// post message to component with id "#selector" with event key of "my_event"
<button click.post="my_event['#selector'](title='hello world')">

// call a process api module
<button 
click.process="{type: 'console', action: 'log', {messages: ['hello', 'world']}}">

// call a process api module from a defined schema
<button click.process="schema_name[process_name(param1: 10, param2: 'B')]">