EMBERJS How to access Model properties from within a template?

Recently I've been learning Ember and I've got a system setup so that I have a local .JSON file being fed into ember store. (Since I don't have a backend API yet and since I'm learning I'd rather focus on ember and just simulate the API side of things.)

Now that the data is flowing, I've noticed I'm unable to access the model properties. For example;

Was hoping someone could perhaps explain this to be a little better since I'm still learning and this seems to be giving me a lot of trouble.

models/user.js

import DS from 'ember-data';

export default DS.Model.extend({
    username: DS.attr('string'),
    avatar: DS.attr('string'),
});

components/app-nav.js

  
  
    
      
      Home
      Test
      Test 2
    
    
      
        
           
            <div class="avatar"><img src= width="32" height="32" alt=""></div>
            <div class="user"> <span class="caret"></span></div>
          
          
            Home
            Test
          
        
      
        <div class="login-button pr-3 text-center">
          <a class="btn btn-primary btn-lg" href="#" role="button">Login</a>
        </div>