The recursive view in the steering pattern does not work after upgrading to Ember 0.9.6

Question

Previously, I could 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' }); 

Steering wheels:

 <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 version of Ember.js (0.9.6), only the last element of any given set of elements is displayed (as one <li> in <ul> ). In previous versions of Ember, a <ul> / <li> nested list was displayed with all the elements in this collection.

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

Answer 1

I think the problem is that by creating a controller inside the App.Menu class, the controller property is the same for each specific instance of App.Menu , see Understanding Ember.Object .

I have moved the binding to a specific controller from the view class and it works, see http://jsfiddle.net/pangratz666/DgG9P/

Rudders

 <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' })] })] });​