StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to access the parent controller that is not singleton when using {{render}}?
text
Body
copied!<p>I wanna access the <code>parent</code> controller, from a controller visited by <code>{{render}}</code>. I've tried <code>needs</code> but its not working. Its giving me a singleton Controller, but I want the explicit <code>controller</code> with its <code>content</code>.</p> <p>How can I solve this Problem to render a matrix?</p> <p>I've created a <a href="http://emberjs.jsbin.com/ArUjeVi/5/edit" rel="nofollow">little demonstration (JS Bin)</a>, its the same code as below.</p> <p>JS:</p> <pre><code>App = Ember.Application.create(); App.Router.map(function() { // put your routes here }); App.IndexRoute = Ember.Route.extend({ model: function() { return { items: [ App.Item.create({ id: 'i1' }), App.Item.create({ id: 'i2' }) ], places: [ App.Place.create({ id: 'p1' }), App.Place.create({ id: 'p2' }) ] }; } }); App.Place = Em.Object.extend({ stores: function() { if (this.get('id') == 'p1') { return [App.Store.create({ id: 's1', itemId: 'i1', quantity: 4 }), App.Store.create({ id: 's2', itemId: 'i2', quantity: 6 }), App.Store.create({ id: 's3', itemId: 'i2', quantity: 12, comment: 'broken' })]; }else { return [App.Store.create({ id: 's4', itemId: 'i2', quantity: 12 })]; } }.property('id') }); App.Item = Em.Object.extend({ }); App.Store = Em.Object.extend(); App.PlaceController = Em.ObjectController.extend({ needs: ['index'] }); App.ItemOnPlaceController = Em.Controller.extend({ needs: 'place', stores: function() { var self = this; // Problem: controllers.place.content == null! alert(this.get('controllers.place.content')); //return this.get('controllers.place.content.stores').find(function(store) { // return self.get('content.id') == store.get('itemId'); //}); }.property('controllers.place.content.stores', 'content.id') }); </code></pre> <p>And the handlebars templates:</p> <pre><code><script type="text/x-handlebars"> <h2>Welcome to Ember.js</h2> {{outlet}} </script> <script type="text/x-handlebars" data-template-name="index"> <h1>Demo</h1> <table> <thead> <tr> <th></th> {{#each item in items}} <th>Item {{item.id}}</th> {{/each}} </tr </thead> <tbody> {{#each place in places}} {{render "place" place}} {{/each}} </tbody> </table> </script> <script type="text/x-handlebars" data-template-name="place"> <tr> <th>Place {{id}}</th> {{#each item in controllers.index.content.items}} <td> {{render itemOnPlace item}} </td> {{/each}} </tr> </script> <script type="text/x-handlebars" data-template-name="itemOnPlace"> {{content.id}} <ul> {{#each stores}} <li>{{quantity}} - {{comment}}</li> {{/each}} </ul> </script> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload