Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to observe embedded arrays in Ember objects?
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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