How can I display the model template in the list only when on the model route?

Question

I repeat the entries list and want to display the contents of each entry in the list, but only when on the corresponding entry route.

i.e. - When on the route /entries/2

 * link to entry 1 * link to entry 2 content for entry 2 * link to entry 3 

Unfortunately, it seems that I cannot use {{outlet}} in the {{#each entry}} loop.

At first I tried to set isActive to true in the setupController on the route and check this in the template, but it doesn't seem like there is a good way to remove this flag when you go to /entries/3 ( deactivate only works when completely removed from /entries/:entry_id ) See Is there an opposite to setupController? for more information about this.

What is the best way to do this with Ember?

Answer 1

You can use a itemController with {{each}} and set the computed property in this element controller to make sure that the current model property is equal to the current App.EntryRoute model.

So, you will have the following route setup:

 App.Router.map(function() { this.resource('entries', { path: '/'}, function() { this.resource('entry', { path: ':entry_id' }); }); }); 

The following template:

 <script type="text/x-handlebars" id="entries"> {{#each controller itemController="entryItem"}} {{#linkTo "entry" this}}{{name}}{{/linkTo}} <br /> {{#if isSelected}} {{details}} <br /><br /> {{/if}} {{/each}} 

No, what you need to do is create an App.EntryItem controller and add a computed isSelected property that should return true if the current route model === model

something like that:

 App.EntryItemController = Em.ObjectController.extend({ needs: 'entry', isSelected: function() { return this.get('controllers.entry.model') === this.get('model'); }.property('controllers.entry.model') }); 

Here is a fiddle with all of the above:

http://jsfiddle.net/teddyzeenny/T2EyK/1/

Answer 2

I got the solution as follows. Please let me know the short sentences in my code. I set the property for the Entry model when you call the entry route to make it visible.

HTML:

 <script type="text/x-handlebars" > {{outlet}} </script> <script type="text/x-handlebars" id="entries"> {{#each controller }} {{#linkTo "entry" this}}{{name}}{{/linkTo}} <br /> {{#if visi}} <p>{{details}}</p> {{/if}} {{/each}} </script> 

JAVASCRIPT:

 App = Ember.Application.create(); App.Router.map(function(){ this.resource('entries', { path: '/'}, function() { this.resource('entry', { path: 'entry/:entry_id' }); }); }); App.Entry = Em.Object.extend({ id: null, name: null, details: null }); App.entries =[ App.Entry.create({ id: 1, name: 'entry 1', details: 'details 1' }), App.Entry.create({ id: 2, name: 'entry 2', details: 'details 2' }), App.Entry.create({ id: 3, name: 'entry 3', details: 'details 3' }) ]; App.EntriesRoute=Ember.Route.extend({ model:function() { return App.entries; } }); App.EntryRoute=Ember.Route.extend({ model:function(params) { var id=parseInt(params.entry_id); return App.entries.findProperty('id',id); }, setupController:function(controller,model){ App.entries.setEach('visi',false); model.set('visi',true); } }); 

Sincerely.