Ember js - want to style outer route based on nested route

Question

I am learning Ember, and I have an app that has nested routes. The outer route renders an index of products that acts as a sidebar, and the inner route renders the selected product.

So I have a setup like this in my coffeescript router:

@resource 'products', ->
    @resource 'product'

And then I have a template like so for product_types.js.emblem:

each product in controller
    .product<NEED_SOMETHING_HERE>

I want NEED_SOMETHING_HERE to give me an extra attribute that will allow me to add a style to the product which will be rendered in the inner route. A class "active", or something similar, is the convention I would use elsewhere. What is the Ember way to do this?

Answer 1

Ember actually does this automatically with the link-to helper!

Ember adds an "active" class when the link matches the current route

http://emberjs.com/guides/templates/links/#toc_the-code-link-to-code-helper