title: How to access variable on template file which is set in route or component in ember
body: <p>This is very basic question but i am not finding it any where.</p>
  
  <p>As per my understanding before rendering template correspondin route or component.js's beforeModel() model() etc functions gets called.</p>
  
  <p><strong>What i want to do:</strong>
  I want to show image of logged in user on my sidenav. User's data is stored in local storage.</p>
  
  <p><strong>My problems here</strong>
  I am hoping that setting a variable in model and returning the same will solve my problem, but my model method is not being called at all.</p>
  
  <p><strong>My Code:</strong>
  Template:</p>
  
  <pre><code>{{#paper-sidenav
        class="md-whiteframe-z2"
        name="right"
        open=leftSideBarOpen2
        lockedOpen=leftSideBarLockedOpen
        position="right"
        onToggle=(action (mut leftSideBarOpen2))}}
        {{#paper-toolbar as |toolbar|}}
          {{#paper-toolbar-tools}}
            &lt;img src="http://example.com/users/{{model.username}}.jpg" /&gt;
          {{/paper-toolbar-tools}}
        {{/paper-toolbar}}
        {{#paper-content padding=true}}
          Çup?
        {{/paper-content}}
      {{/paper-sidenav}}
  </code></pre>
  
  <p><strong>Component.js</strong></p>
  
  <pre><code>import Ember from 'ember';
  
  export default Ember.Component.extend({
    beforeModel(){
  
    },
    model(){
      let user = localStorage.get('user');
      console.log(user.username);
      return user;
    },
    actions:{
      toggle(propName) {
        this.toggleProperty(propName);
      }
    }
  });
  </code></pre>
  
  <p>In console i am getting error "GET <a href="http://example.com/users/.jpg" rel="nofollow noreferrer">http://example.com/users/.jpg</a> 404 (Not Found)", which certainly says that user.username in my template evaluates to null. i tried debugging my model method in chrome's dev tool and found that model is not getting called
  Could you please let me know where i'm mistaking?</p>