Databases
StackOverflow2013
Postsdbo
POHow to observe embedded arrays in Ember objects?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to observe embedded arrays in Ember objects?
    text
    copied!<p>In Ember.js, creating a observer which reacts to changes in sub-properties which is an array leads to non intuitive behavior. If the observer directly <i>observes</i> the array property, it fails to fire while if it observes a binding to the same property, it works as expected. </p> <p>A simple example:</p> <p><b>Handlebars:</b></p> <pre class="lang-html prettyprint-override"><code>&lt;script type="text/x-handlebars"&gt; &lt;b&gt;App.View1.name:&lt;/b&gt; {{App.View1.name}} &lt;br /&gt; &lt;b&gt;App.View2.name:&lt;/b&gt; {{App.View2.name}} &lt;/script&gt; </code></pre> <p><b>Javascript:</b></p> <pre class="lang-js prettyprint-override"><code>App = Em.Application.create(); // A common dependency for two views var dependency = Em.Object.create({ prop: [] }); // Directly observes dependency.prop App.View1 = Em.View.create({ dependency: dependency, name: "Foo", changeName: function () { this.set("name", "Bar"); }.observes("dependency.prop") }); // Indirectly observes dependency.prop via a binding App.View2 = Em.View.create({ dependency: dependency, name: "Foo", changeName: function () { this.set("name", "Bar"); }.observes("prop"), propBinding: "dependency.prop" }); // Updating the 'prop' property of dependency with an element. dependency.get("prop").pushObject("An object."); </code></pre> <p>I have put it up on JSFiddle here: <a href="http://jsfiddle.net/kbaXG/50/" rel="nofollow">http://jsfiddle.net/kbaXG/50/</a></p> <p>Here, <code>App.View1.name</code> is NOT updated (stays "Foo") while <code>App.View2.name</code> is updated (to "Bar").</p> <p>Is this expected behavior and is creating a <i>binding</i> an acceptable workaround?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload