Trying to understand Ember JS promises

Question

I have been trying to work on a code example to get my head around promises. But I can't seem to figure out how to deal with the callbacks and get the "thenable" value later.

Here are two relevant JSBin examples I am working on. Written in verbose style to emulate baking cookies.

Ember JS without async

http://jsbin.com/iSacev/1/edit

purely synchronous example to show the basic behavior (deliberately using basic object model)

Ember JS with async and promises

http://jsbin.com/udeXoSE/1/edit

Attempt to extend the first example and implement method where things are done with a delay and returns a fulfilled promise object later in time.

Concepts attempting to understand:

• How to properly handle promises and specifically Ember.RSVP.Promise and get an object later.
• How to use the Ember.run.later method instead of setTimeout

Answer 1

How to properly handle promises and specifically Ember.RSVP.Promise and get an object later

Seems like you are close to having this figured out, just had to make some minor changes to your jsbin to get things working:

First, instead of pushing the promise onto your array you should push the value that the promise passes to the then callback. Really in this case you don't need that promise object at all. So:

// Call the then function on the promise
App.cookieSlowBake(cookie).then(function(value) {
  alert("Your slow baked cookies are ready to eat");
  App.CookieStore.pushObject(value);
}, function(value) {
  // failure
  alert("Something happened with the oven sorry no cookies.");
});

Second change was to fix a bug in cookieSlowBake. In the original version the promise was being rejected because of a conditional test that would always evaluate to false since it was not in the Ember.run.later callback. The new version gets rid of the conditional and just resolves the promise when the callback is done.

var bakedCookiePromise = new Ember.RSVP.Promise(function(resolve, reject){
  var bakeTime = 2000; // milliseconds
  var bakedCookie = false;
  Ember.run.later(cookieDough, function() {
    // code here will execute within a RunLoop in about the bakeTime with this == cookieDough
    cookieDough.set('deliveryStatus', "cookie delivered later after baking " + bakeTime);
    bakedCookie = true;  
    resolve(cookieDough);
  }, bakeTime);
});

See working jsbin here: http://jsbin.com/ebOBEk/1/edit

How to use the Ember.run.later method instead of setTimeout

They are basically the same thing. You seem to be using it correctly.