Note that there are some explanatory texts on larger screens.

plurals
  1. POProper way to observe ChildViews in Ember?
    text
    copied!<p>Here's a <a href="http://jsfiddle.net/EsF4R/174/" rel="nofollow">fiddle for this question</a> (make sure you have your console open):</p> <p>Basically, I have a handlebars block view as a parent, then loop through an array of items and create child block views for each item. Later, those children are modified in some way, and I want to detect and handle that event.</p> <p>Summary Code:</p> <pre><code>{{#view App.outerView}} {{#each item in items}} &lt;h6&gt;Person:&lt;/h6&gt; {{#view App.innerView}} &lt;dl&gt; &lt;dt&gt;First Name&lt;/dt&gt;&lt;dd&gt;{{item.first}}&lt;/dd&gt; &lt;dt&gt;Last Name&lt;/dt&gt;&lt;dd&gt;{{item.last}}&lt;/dd&gt; &lt;/dl&gt; {{/view}} {{/each}} {{/view}} </code></pre> <p>At some later point:</p> <pre><code>controller.get( 'items' ).pushObject( 'new item' ); </code></pre> <p>In the jsFiddle, I am trying to keep the last child object always highlighted (active = true). When the outerView is initially inserted, we apply the highlight to the last item and it works as expected. Later, when we add a new item, our highlight method fires, but it doesn't see the new item.</p> <p>2 Questions about this:</p> <ul> <li><p><strong>Main Question</strong>: Why doesn't the last item (Matt) get highlighted? In other words, why, after a new item has been added, does <code>childViews.length</code> still report the old value? Is there a better way to be doing this?</p></li> <li><p><strong>Secondary Question</strong>: Why does the observer on <code>childViews</code> fire twice when we add the new item? (3 times total: 1 on initial insert, 2 from addition of 1 new child item)</p></li> </ul> <hr /> <p><strong>Edit</strong>: I've adjusted the fiddle a little to better illustrate my needs. Notice the mixed content of the outerView (HTML + innerViews). Basically, my outerView needs to accept ANY content as children, not just an array/collection of views/data.</p> <p><strong>Edit 2</strong>: Further clarification: Manipulating those child views after the fact is a different story and can be accomplished either by working with the contents of <code>childViews</code> (ember views) or using jQuery to manipulate HTML elements that may not be a formal ember view object, or any other means. <em>The real goal here is simply to capture the event when ANY of the outerView content changes (with a current copy of childViews).</em></p> <p><strong>Edit 3</strong>: Here's an <a href="https://github.com/emberjs/ember.js/issues/2355" rel="nofollow">Issue on Github</a></p>
 

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