Ember.js v0.9.7

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="https://gist.github.com/raw/2623105/866ddf40ed1d206c8bc6a75731544325613d5c3c/ember-layout.js"></script>
<script src="https://gist.github.com/raw/2623105/89170ac7b4803accbf85af7c8aa901995559426f/ember-routemanager.js"></script>
<script type="text/x-handlebars" data-template-name="home">
    <h2>Home Page</h2>
    
    {{#if App.hasVisitedList}}
        <p>Now click list again and it will break because somehow App.items has its content set to nulls.</p>
    {{else}}
        <p>First go to the list page.</p>
    {{/if}}
    
    <button {{action goToList target="App.navigation"}}>list</button>
</script>

<script type="text/x-handlebars" data-template-name="list">
    <h2>List Page</h2>
    
    <p>Now go to home and try and come back here</p>
    
    <button {{action goToHome target="App.navigation"}}>home</button>
    
    {{view App.ItemsListView contentBinding="App.items"}}
</script>

<script type="text/x-handlebars" data-template-name="layout">
    <h1>A Layout</h1>
    
    {{dynamicView}}
    
    
     <p>
        Issue appears to be caused by <a href="https://github.com/emberjs/ember.js/commit/09d7ad62b214c094621ade5515d2a29a59464f89">this commit</a>.
    </p>
   
</script>

<script type="text/x-handlebars" data-template-name="item">
    {{upcaseName}}
</script>

JavaScript

// uncomment this to fix the issue

/*
Ember.ArrayProxy.reopen({
  length: Ember.computed(function() {
    var content = Ember.get(this, 'content');
    return content ? Ember.get(content, 'length') : 0;
  // }).property().cacheable()
  }).property('content.length').cacheable()
});
*/

App = Ember.Application.create({});

App.navigation = Ember.Object.create({
    goToList: function() {
        App.stateManager.goToState('list');
        App.set("hasVisitedList", true);
    },
    
    goToHome: function() {
        App.stateManager.goToState('home');
    }
});

App.HomeLayoutView = Ember.View.extend({
    templateName: "home"
});

App.ListLayoutView = Ember.View.extend({
    templateName: "list"
});

App.layoutView = Ember.View.create({
    templateName: "layout"
});
App.layoutView.append();

App.stateManager = Ember.StateManager.create({
    enableLogging: true,
    rootView: App.layoutView,
    initialState: "home", 
    
    home: Ember.LayoutState.create({
        viewClass: App.HomeLayoutView
    }),
    
    list: Ember.LayoutState.create({
        viewClass: App.ListLayoutView,        
        enter: function(manager, transition) {
            this._super(manager, transition);
            App.get("items").fetchContent();
        }
    })
});

App.ItemView = Ember.View.extend({
    templateName: "item",
    upcaseName: function() {
        if (!this.get("content")) { 
            alert("broken - see the console"); 
            console.info("App.items: ", App.get("items").toArray());
            console.info("App.items.content: ", App.get("items").get("content").toArray());            
        }
        return this.getPath("content.name").toUpperCase();
    }.property().cacheable()
});

var itemIndex = 0;
App.items = Ember.ArrayController.create({
    init: function() {
       this.set("content", []) 
    },
 
    fetchContent: function() {
        var items = Ember.ArrayProxy.create()
        this.set("content", items);
       
        // simulate Ajax...