{{}}Instant AriaTemplates


{macro main()} <button {on click "updateModelBad" /}>Update counter</button> <button {on click "updateModelBetter" /}>Update counter (better)</button> <br> Counter has value of: {@aria:Text { text : this.data.counter, bind : { text : { inside: this.data, to: "counter" } } }/} {/macro}

Template Script

({ $classpath:'InstantTemplateScript', $prototype : { updateModelBad: function() { // just updates the value in data model // won't trigger all the updates defined through data binding this.data.counter++; alert("counter is " + this.data.counter); }, updateModelBetter: function() { // better, this will trigger all the refreshes this.$json.setValue(this.data, "counter", this.data.counter + 1); alert("counter is " + this.data.counter); } } })

CSS Template

{macro main()} {/macro}

Data Model

{ "counter": 0 }

Keyboard Shortcuts

ESC to close


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
CTRLHFind / Replace
CTRL/Toggle comment