Why is #each traverse order reversed when inside a component? - ember.js

Question

See the jsbin example here
Here is my code:
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
App.DerpMenuComponent = Ember.Component.extend({
items: null,
createSteps: function() {
this.set('items', Ember.ArrayProxy.create({content: []}));
}.on('init'),
register: function(item) {
this.get('items').addObject(item);
}
});
App.DerpMenuItemComponent = Ember.Component.extend({
title: null,
register: function() {
this.get('parentView').register(this);
}.on('didInsertElement')
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.8.0/ember.js"></script>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
{{#derp-menu}}
{{#each item in model}}
{{#derp-menu-item title=item}}
<div style="background: #CCC; color: #00F; margin: 10px; padding: 5px">{{item}}</div>
{{/derp-menu-item}}
{{/each}}
{{/derp-menu}}
</script>
<script type="text/x-handlebars" id="components/derp-menu">
<ul>
{{#each item in items}}
<li>{{item.title}}</li>
{{/each}}
{{yield}}
</ul>
</script>
<script type="text/x-handlebars" id="components/derp-menu-item">
{{yield}}
</script>
I can see, that the derp-menu-elements register in reverse order, when adding them into the template dinamically, using the #each helper. Can anyone please explain why that is the case? If I manually type out the derp-menu-items inside the derp-menu component - everything is displayed correctly, I'm guessing that's because Handlebars somehow act differently in that scenario. Can anyone provide insights into what's happening in both of these cases?

Answer 1

the didInsertElement event always fire from the last/lowest level and then moves up the tree. This is so that when didInsertElement is fired on a parent element you can be sure that all the children are already inserted in the dom.
In your case you are registering with the parent .on('didInsertElement') you are ending up with the elements getting added to the array in the reverse order.
If you changed your code to be based on .on('init') (like below) then they would get be in the same order.
App.DerpMenuItemComponent = Ember.Component.extend({
title: null,
register: function() {
this.get('parentView').register(this);
}.on('init')
});
You can see a working example here: http://emberjs.jsbin.com/hirolu/1/edit?html,js,output