Aria Templates common mistakes: not using $json.setValue

instant.json

{
  "name": "Aria Templates common mistakes: not using $json.setValue",
  "description": "When you forget to use setValue for updating the data model entry, none of defined data binding refreshes will occur",
  "data": {
    "counter": 0
  }
}

InstantTemplate.tpl

{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}

InstantTemplateScript.js

({
    $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);
      }
    }
})

InstantTemplateStyle.tpl.css

{macro main()}
{/macro}

Created by Instant Aria Templates, viewable on http://instant.ariatemplates.com/jakub-g/8008f24f8f8340d80723