在此处查看jsbin示例

这是我的代码：

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>

我可以看到，当使用#each助手将它们以相反的顺序添加到模板中时，derp-menon-元素以相反的顺序注册。有人能解释一下为什么会这样吗？如果我在derp-菜单组件中手动输入derp-menon-item-一切都正确显示，我猜这是因为Handlebar在这种情况下的行为有所不同。有人能提供对这两种情况下发生的事情的见解吗？