Ember Controllers and Routes

Question

I'm sure there is a much easier way to accomplish my current task but this is the only way I know how to do so far since I am just starting out with Ember.

So I have a RESTful api which tells ember which user is currently logged in (their name only) so that it can be displayed on the page as Signed in As {{currentUser}}. The only way I have been able to make it work is by extending the application route as such:

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    var deferredData = Ember.Deferred.create();          
    var list = [];
    $.getJSON( '/user/profile/', function(data) {
      list.push({
        currentUser: data[0].name
      })
      deferredData.resolve(list);
    });
    return deferredData;
  }
});

and then on my page doing:

<p class="navbar-text navbar-right">
    <p class="navbar-text navbar-right">Signed in as {{#link-to 'account' class="navbar-link" id="current-user"}}{{#each}}{{currentUser}}{{/each}}{{/link-to}}</p>
</p>

It works but I feel as if this is not the appropriate way of accomplishing my task. I tried using App.ApplicationController with the following:

App.ApplicationControler = Ember.Controller.extend({
  currentUser: function() {
    $.getJSON( '/user/profile/', function(data) {
      return data[0].name
    });
  }.property()
});

That didn't work for me either. Any ideas what I should do/what I'm doing wrong?

UPDATE

After some more reading around this is now what I have and I think it's the closest I've come to getting it right

App.ApplicationController = Ember.Controller.extend({
  currentUser: function() {
    return $.getJSON('/user/profile/').then( function(response) {
      console.log(response[0].name);
      return response[0].name;
    });
  }.property()
});

App.applicationController = App.ApplicationController.create();

Would using data stores and RESTadapters be a better choice for me at this point?

Answer 1

I fixed my issue. I was trying to set the response to just one value but that wouldn't work because that value wouldn't be stringified. To fix this problem I did the following:

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return $.getJSON('/user/profile/').then( function(data) {
      return { 
        currentUser: data[0] 
      };
    });
  }
});

and in my view I did the following:

  <script type="text/x-handlebars" data-template-name="navigation">
    <nav class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        {{#link-to 'index' class="navbar-brand"}}Budgeter{{/link-to}}
        <p class="navbar-text navbar-right">
          Signed in as {{#link-to 'account' class="navbar-link" id="current-user"}}{{currentUser.name}}{{/link-to}}
        </p>
        <ul class="nav navbar-nav">
          <li>{{#link-to 'index'}}<i class="fa fa-home sp-aft"></i>Home{{/link-to}}</li>
          <li>{{#link-to 'account'}}<i class="fa fa-user sp-aft"></i>Account{{/link-to}}</li>
          <li><a href="/logout"><i class="fa fa-sign-out sp-aft"></i>Sign Out</a></li>
        </ul>
      </div>
    </nav>
  </script>

Works perfectly now.

Answer 2

You should use whichever data adapter you're using for other data. Plain $.ajax is fine, if that's what you're using.

The first attempt with route.model hook and rendering navbar into the application template is the correct way to do this. I'm not sure, however, why are you creating an array when you only seem to need one. Try this:

App.ApplicationRoute = Ember.Route.extend({
    model: function() {
        return $.getJSON('/user/profile/')
            .then(function (data) {
                return {
                    currentUser: data[0].name
                };
            });
    }
});

application.hbs:

<p class="navbar-text navbar-right">
    <p class="navbar-text navbar-right">
        Signed in as {{#link-to 'account' class="navbar-link" id="current-user"}}{{currentUser}}{{/link-to}}
    </p>
</p>

Ah, yes. And you should define your ApplicationController as:

App.ApplicationController = Ember.ObjectController.extend({});

... so you would have direct access to your model object.