Ember latest Template

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<p>Description:</p>
<p>Observers with multiple @each values (like [email protected][email protected]) work only when first array (ie. pages) is available at the time observer is set. This is a situation in App.container, pages is set to [page] while creating object. In App.container1, page is added to pages array after creating an object. After adding 3 posts to the page, you can see that observePosts object is triggered only for container, but not container1 (there is one container1 message, but this is triggered after pushing page to pages).
</p>

<p>Messages:</p>
<script type="text/x-handlebars">
    {{#each App.messages}}
        --{{this}}</br>--
    {{/each}}
</script>

CSS

p { margin: 5px 10px; }

JavaScript

App = Ember.Application.create();
App.set('messages', []);

var post = Em.Object.create();
var page = Em.Object.create({posts: [post]});

App.container = Em.Object.create({
    pages: [page],
    observePosts: function() {
        App.get('messages').pushObject('observePosts triggered in container');                
    }.observes('[email protected][email protected]')
});


App.container1 = Em.Object.create({
    pages: [],
    observePosts: function() {
        App.get('messages').pushObject('observePosts triggered in container1');                   
    }.observes('[email protected][email protected]')
});

App.container1.get('pages').pushObject(page);

page.get('posts').pushObject(post);
page.get('posts').pushObject(post);
page.get('posts').pushObject(post);