{{}}Instant AriaTemplates

Template

{macro main()} <button {on click "updateModelBad" /}>Update (bad)</button> <button {on click "updateModelStillBad" /}>Update (even worse)</button> <button {on click "updateModelBetter" /}>Update (best)</button> <br> Magic value is: {@aria:Text { bind : { text : { inside: this.data.myContainer, to: "magicValue" } } }/} <hr> <p>1. The 'bad' button operation retrieves a reference to 'myContainer' object, modifies the object, and then assigns back this reference to the data model entry. It's basically equivalent to this code: <pre> var a, b; a = \{\}; b = a; b.someProperty = 42; a = b; </pre> It's just juggling the references, <code>a</code> is still the same object after the last assignment. The last operation doesn't really change anything; both <code>a</code> and <code>b</code> are references to the very same object already, so last action is essentally a NOOP. <hr> <p>2. The 'even worse' button tries to circumvent the issue from point 1) by creating a new object, instead of modifying the existing one. This however creates other problems. Our Text widget is bound to <code>magicValue</code> of <code>this.data.myContainer</code> object at the time of its first evaluation. the line <pre> this.$json.setValue(this.data, "myContainer", c); </pre> is equivalent in this context to <pre> this.data.myContainer = \{...\} </pre> In other words, we're destroying the reference to the original object, to which the widget is bound. Now the data model contains a completely new object, while the widget is still hoping to see updates to the old object, but that reference is lost, so no updates will ever occur any more. <br><br> <hr> <p> 3. The 'best' button implements things correctly - it doesn't change the reference to the original object, but it mutates the <em>properties</em> of that object.<br><br> <strong>Note that The last button implements the correct behavior, but after clicking the middle button first, it won't work, because it will try to update, though correctly, not the proper object that the widget is observing.</strong> If the last button is not working fine for you, you have to refresh the page. {/macro}

Template Script

({ $classpath:'InstantTemplateScript', $prototype : { updateModelBad: function() { var c = this.data.myContainer; c.magicValue = 42; c.otherValue = 888; this.$json.setValue(this.data, "myContainer", c); }, updateModelStillBad: function() { var c = { magicValue: 42, otherValue : 888 }; this.$json.setValue(this.data, "myContainer", c); }, updateModelBetter: function() { this.$json.setValue(this.data.myContainer, "magicValue", 42); this.$json.setValue(this.data.myContainer, "otherValue", 888); } } })

CSS Template

{macro main()} {/macro}

Data Model

{ "myContainer": { "magicValue": 7 } }

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