Recursive view in handlebars template not working after upgrading to Ember 0.9.6

Question

I used to be able to do something like this to get a nested unordered list of items:

Javascript:

App.Menu = Em.View.extend({

    controller: App.menuController.create({}),

    tagName: 'ul',

    templateName: 'Menu',

    pageBinding: 'controller.page'

});

Handlebars:

<li>
    {{page.menuTitle}}
    {{#each page.childrenPages}}
        {{view App.Menu pageBinding="this"}}
    {{/each}}
</li>

index.html:

<script type="text/x-handlebars">
    {{view App.Menu}}
</script>

Now after updating to the latest Ember.js (0.9.6), only the last item of any given collection of items is being displayed (as a single <li> within the <ul>). In previous versions of Ember, a nested <ul>/<li> list with all items of a given collection was displayed.

I think that instead of a new App.Menu view being created each time through {{#each}}, the existing view is just being reused... any ideas on how I can achieve something similar to the old behavior?

Answer 1

I think the issue is that by creating the controller inside the class App.Menu the controller property is the same for every concrete instance of App.Menu, see Understanding Ember.Object.

I've moved the binding to the specific controller out of the view class and it works, see http://jsfiddle.net/pangratz666/DgG9P/

Handlebars:

<script type="text/x-handlebars" data-template-name="Menu" >
    <li>
        {{page.menuTitle}}
        {{#each page.childrenPages}}
            {{view App.Menu pageBinding="this"}}
        {{/each}}
    </li>
</script>

<script type="text/x-handlebars">
    {{view App.Menu pageBinding="App.mainPage" }}
</script>

JavaScript:

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

App.Menu = Em.View.extend({
    tagName: 'ul',
    templateName: 'Menu'
});

App.mainPage = Ember.Object.create({
    menuTitle: 'main page',
    childrenPages: [Ember.Object.create({
        menuTitle: 'subtitle 1',
        childrenPages: [Ember.Object.create({
            menuTitle: 'subtitle 1 - child 1'
        })]
    }), Ember.Object.create({
        menuTitle: 'subtitle 2',
        childrenPages: [Ember.Object.create({
            menuTitle: 'subtitle 2 - child 1'
        })]
    })]
});​