title: Ember Router active item on click or route change
body: <p>I have a list of posts pulled from the server using Ember Datastore, which I then render in a sidebar list like view, each post generates a href using the {{action}} helper which generates a valid href by looking up the corresponding router state. Clicking on a Post loads it into a content outlet. This all works perfectly.</p>
  
  <p>I want to add a class to an item when it is selected — "is-active" for example — either when clicking on it, or when the router state transitions to the state which matches the href, for example: when the user presses the back button or navigates directly to /posts/24, a Post with ID 24 gets selected.</p>
  
  <p>Ideally I would like the solution to this be separated from the actual Post record as it is purely a presentation thing and I want to also use this approach for highlighting menu items using the same principle.</p>
  
  <p><strong>What is the generally accepted way to do this?</strong></p>
  
  <p><strong>Edit:</strong></p>
  
  <pre><code>App.Router: Ember.Router.extend(
    root: Ember.Route.extend(
      goToPostsIndex: Ember.State.transitionTo('posts.index')
      goToAbout: Ember.State.transitionTo('about')
      goToShowPost: Ember.State.transitionTo('posts.show')
  
      index: Ember.Route.extend(
        route: '/'
        redirectsTo: "posts.index"
      )
  
      posts: Ember.Route.extend(
        route: '/posts'
  
        index: Ember.Route.extend(
          route: '/'
          connectOutlets: ((router) -&gt;
            router.get('applicationController').connectOutlet('posts', App.posts)
          )
        )
  
        show: Ember.Route.extend(
          route: '/posts/:post_id'
  
          connectOutlets: (router, post) -&gt;
            router.get('postsController').connectOutlet('post', post)
       )
     )
  
       about: Ember.Route.extend(
         route: '/about'
         connectOutlets: (router) -&gt;
           router.get('applicationController').connectOutlet('about')
       )
  
      )
    ) 
  )
  </code></pre>
  
  <p>Here is a fiddle of my current setup: <a href="http://jsfiddle.net/Pts7Q/31/" rel="nofollow">http://jsfiddle.net/Pts7Q/31/</a></p>