{{}}Instant AriaTemplates

Template

{macro main()}
    <h1>Hello Instant Aria Templates</h1>
    {section {
        bindRefreshTo: [{to:"toggle", inside:this.indata}],
        macro: {name: "myMacro", scope : this}
    } /}
    <br><br><br>
    <div {on tap {fn: tapCB, scope: this}/}>Reset</div>
{/macro}

{macro myMacro()}
    {if this.indata.toggle}
    <div {on tap {fn: tapCB, scope: this}/}>Tap me</div>
    {else/}
    <input {on click {fn: inputCB, scope: this}/} />
    {/if}
{/macro}

Template Script

({
    $classpath:'InstantTemplateScript',
    $prototype : {
      $dataReady: function () {
        this.indata = {toggle: true}  
      },
      tapCB: function(evt) {
          //evt.preventDefault();
          aria.utils.Json.setValue(this.indata,"toggle", !this.indata.toggle);
      },
      inputCB: function() {
          alert("Click on input !!!");
      }
    }
})

CSS Template

{macro main()}
{/macro}

Data Model

{}

Keyboard Shortcuts

ESC to close

Global

CTRLSHIFT?Show this help
CTRLICreate a new instant
CTRLSSave an instant

Editor Navigation

CTRL1Go to Template editor
CTRL2Go to Template Script editor
CTRL3Go to Template Style editor
CTRL4Go to Data Model editor
ESCGo back to split view

Editorofficial ACE Documentation

CTRLLGo to line
CTRLFFind
CTRLHFind / Replace
CTRL/Toggle comment