Search code examples
ember.jsember-model

Issue with Ember Model promises


I'm trying to do some basic stuff with Ember Model but I'm experiencing some weird behaviors with promises. Not sure I understand very well how it's supposed to work.

So, I have this route:

App.ProfilesIndexRoute = Ember.Route.extend {

  redirect: ->
    App.Profile.fetch().then (profiles) ->
      console.log profiles.get('length')
      @transitionTo 'profile', profiles.get('firstObject')

}

I simply want people to be redirected to /profiles/123 (= the first profile) when they access /profiles.

Here is the Profile adapter:

App.Profile.adapter = Ember.Adapter.create {

  findAll: (klass, records) ->
    $.ajax('/api/users/' + $.cookie('user_id'), {
      type: 'get'
      headers: {
        'Content-Type': 'application/json'
        'Authentication-Token': $.cookie('token')
      }
      dataType: 'json'
    }).then (res) ->
      profiles = []
      // some stuff done here
      records.load klass, profiles

}

When I go to /profiles, here is what I see in my console:

0
Transitioned into 'profiles.index'
XHR finished loading: "http://localhost/api/users/456". 

0 is the result of console.log profiles.get('length'). It seems that it's called before the AJAX call had the chance to finish. What I should have in my console is something like this:

Transitioned into 'profiles.index'
XHR finished loading: "http://localhost/api/users/456". 
5

What am I doing wrong here? Someone here suggested me to use fetch instead of find but it doesn't seem to solve my problem because things are not executed in the right order.

Thank you!


Solution

  • I finally found how to solve the problem thanks to this jsFiddle by Erik Bryn.

    I was missing a return here:

    App.Profile.adapter = Ember.Adapter.create {
    
      findAll: (klass, records) ->
        $.ajax('/api/users/' + $.cookie('user_id'), {
          type: 'get'
          headers: {
            'Content-Type': 'application/json'
            'Authentication-Token': $.cookie('token')
          }
          dataType: 'json'
        }).then (res) ->
          profiles = []
          // some stuff done here
          records.load klass, profiles
          return records // HERE
    
    }
    

    Also, I now use the init method in my ProfilesIndexRoute instead of redirect:

    App.ProfilesIndexRoute = Ember.Route.extend {
    
      init: ->
        App.Profile.fetch().then (profiles) =>
          @transitionTo 'profile', profiles.get('firstObject')
    
    }