Problems migrating Ember from Ember.Object dummy data to data from $.get

Question

I simply want a single $.get call to satisfy a particular model. I can't seem to find any documentation that clearly shows how to go about doing this?

ie I have an application controller as:

App.ApplicationController = Ember.ObjectController.extend({
  username: '',
  firstname: '',
  lastname: ''
});

How do I set the username with data from a $.get? I know there is Ember Data and other libraries that do this, but I'd like to do this without those libraries and furthermore better understand how Ember works with Asynchronous data.. Their guides unfortunately didn't help much :/

Thanks for any help :)

UPDATE

Thanks guys for the answers so far, but I don't think I explained my problem sufficiently.

I have application.hbs :

<div class="medium-8 columns">
 <dl class="account-menu right">
   <dd><p><a href="">Welcome, {{username}}</a></p></dd>
   <dd><p><a href="">Customer Support</a></p></dd>
   <dd><a href="#">Log Out</a></dd>
  </dl><!-- .acccount-menu -->
</div>

I have Model:

App.User = Ember.Object.extend({
  id      : '', 
  firstName : '',
  lastName  : '',
  username  : '',

  init: function(){
    console.log(App.Account.get('username');
  },

  fullName: function(){
    return this.get('firstName') + ' ' + this.get('lastName');
  }.property('firstName', 'lastName'), 

}).reopenClass({
  loadAccount: function(){
    return $.get( "http://localhost:8080", { id: 1, request: "account" }).then(function(response){ 
      App.Account = App.User.create({'username': response.username});
    });
  }
});

The Controller is the same as above. I am successfully Creating a new App.Account from App.User.create and successfully triggering the App.User abstract class? init method.. Problem is {{username}} never gets updated? I know I'm missing something simple here! Thanks again for all your help

Answer 1

You would set the model of your ApplicationRoute to the JSON you fetch:

App.ApplicationRoute = Ember.Route.extend({
   model: function() {
     return $.getJSON('your_url_goes_here');
   }
})

This way every time the route is entered the model (and thus implicitly the content of your controller) will be set to the JSON returned by your AJAX call.

Answer 2

The model is set with the model hook of the associated route. In your case:

App.ApplicationRoute = Ember.Route.extend({
    model: function(){
        return $.get.......
    }
});

The model hook will accept an asynchronous call, but ember will not continue to render the view until the model hook promise is complete.

Answer 3

Guys thanks so much for your help.. Turns out it was a simple oversight...

I was not returning the Object Model promise 'App.User' that I had created in the loadAccount method, which is called by the ApplicationRouter model hook.

Bad Code

loadAccount: function(){
  return $.get( "http://localhost:8080", { id: 1, request: "account"    }).then(function(response){ 
    App.Account = App.User.create({'username': response.username});
});

Good Code

loadAccount: function(){
  return $.get( "http://localhost:8080", { id: 1, request: "account"    }).then(function(response){ 
    return App.User.create({'username': response.username});
});

It makes sense. The $.get method returns a promise to my model that I never delivered on with a return value inside the .then() method

Thank you all for you answers and attention to the matter