title: Component to be notified on route change in EmberJS 2
body: <p>My task is to develop a menu component for an Ember 2 app. This is going to be a complex component whose visual representation changes as the user goes through routes. For instance it should disable particular menu and all its items when on "/index" route but enable it and some of its items when on "/details" and so on.</p>
  
  <p>So, I've got a component that is passed a singleton model (stored in a Service currently, btw, is it a right place to store globally available singleton models in Ember?). It displays the stuff well but it does not respect the current route nor catches the route changes as user goes through the app. How can I achieve it?</p>
  
  <p>Summing it up:</p>
  
  <ol>
  <li>The component needs to get current route somehow to be able to display its initial state, for instance the user bookmarked the "/details" page and visited it.</li>
  <li>The component has to deal with route changes somehow.</li>
  <li>Is a Service a good place to hold a singleton model (which could potentially be fetched from server).</li>
  </ol>
  
  <p>Can you provide your thoughts on how to tackle the three above?</p>
  
  <p>SOLVED: Ok, here's how it is done, thanks to @Bek's suggestions:</p>
  
  <pre><code>import Ember from "ember";
  
  export default Ember.Component.extend({
      router: Ember.inject.service("-routing"),
  
      didInsertElement: function() {
          let r = this.get("router");
          console.log("Initial route", r.get("currentRouteName"));
  
          r.addObserver("currentRouteName", this, "currentRouteNameChanged");
      },
  
      "currentRouteNameChanged": function(router, propertyName) {
            console.log(router.get("currentRouteName"));
      }
  });
  </code></pre>
  
  <p>MORE QUESTIONS :) - I had to surround the <code>currentRouteNameChanged</code> function name with quotes (to make it a string) otherwise it was not called. I assume I miss something very basic and obvious here?</p>
  
  <p>One more issue is the funky service name <code>-routing</code> - @Bek, any hints on how could I figure it out myself, is there a list of injectable stuff I could look up information in? It is not yet in Ember documentation I assume but where in the source code of it to check it out? How stable <code>-routing</code> name in general, would it become <code>*routing</code> or something in final version?</p>