To create a child controller and add a computed property to determine if it is active, follow these steps:
The ul controller (Utilize the ApplicationController for simplicity):
App.ApplicationController = Ember.ObjectController.extend({
mode: ['list', 'grid', 'table'],
active: 'list'
});
The li controller:
App.LiController = Ember.ObjectController.extend({
needs: ['application'],
isActive: function() {
return this.get('controllers.application.active') === this.get('model');
}.property()
});
The template:
<ul>
{{#each mode itemController="li"}}
<li {{bind-attr class="isActive:active"}}>
<a href="#">{{model}}</a>
</li>
{{/each}}
</ul>
JSBin
Why do I need an additional controller?
As stated in Ember's documentation, controllers allow you to enhance your models with display logic. Models will contain properties saved to the server, while controllers will include properties that are not required to be saved to the server.
Hence, the extra controller serves the sole purpose of holding the isActive property.
What is {{content}} used for?
content represents the underlying object of the controller, which in this case is a string literal. It is not a reserved keyword but rather a property of the controller.
I have revised my answer to utilize model instead of content. Both terms refer to the same thing, but it is recommended to use the model property consistently. For more insights, refer to this forum discussion.