Testing class changes

instant.json

{
  "name": "Testing class changes",
  "description": "",
  "data": {
    "themes": [
      {
        "value": "theme1",
        "label": "Black on lime"
      },
      {
        "value": "theme2",
        "label": "Navy on blue"
      }
    ]
  }
}

InstantTemplate.tpl

{macro main()}

    <div {id "main"/} class="theme2">
        <div {id "title"/} class="title">
            <h1>Hello Instant Aria Templates</h1>
        </div>
    </div>
    
    {@aria:SelectBox {
        label: "New theme: ",
        labelWidth:220,
        options : data.themes,
        onchange: changeColor,
        bind : {
            value : {
                to : "theme",
                inside : data
            }
        }
    }/}
{/macro}

InstantTemplateScript.js

({
    $classpath:'InstantTemplateScript',
    $prototype : {
      changeColor: function() {
        //alert("New theme:"  + this.data.theme);
        this.$getElementById("main").setProperty('className', this.data.theme);
      }
    }
})

InstantTemplateStyle.tpl.css

{macro main()}
    .theme1 {
        background-color : #000000;
    }
    
    .title {
        cursor: pointer;
    }
    
    .theme1 .title {
        color : #00ff00;
    }
    
    .theme2 {
        background-color : #E1E6FC;    
    }
    
    .theme2 .title {
        color : #000080;
    }
    
    
{/macro}

Created by Instant Aria Templates, viewable on http://instant.ariatemplates.com/leogomes/6086922