passing-deferreds-down

components.delete-blog.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: [ 'delete-blog' ],
  
  sudoDeferred: null,
  isDone: false,
  isWorking: false,
  message: null,
  
  actions: {
    submit() {
      if (this.get('isDone')) return;

      const d = Ember.RSVP.defer();
      this.set('isWorking', true);
      this.set('sudoDeferred', d);
      d.promise
      .then((token) => {
        this.set('isDone', true);
        this.set('message', 'Deleted');
      })
      .catch((message) => {
        this.set('message', message);
      })
      .finally(() => {
        this.set('isWorking', false);
      });
    }
  }
});

components.sudo-field.js

import Ember from 'ember';

export default Ember.Component.extend({
  password: null,
  
  deferred: Ember.computed({
    get() { return null; },
    
    set(_, deferred) {
      if (deferred) {
        this.checkSudoAccess()
        .then(deferred.resolve, deferred.reject);
      }
      
      return deferred;
    }
  }),
  
  checkSudoAccess() {
    return new Ember.RSVP.Promise(function(resolve) {
      Ember.run.later(resolve, 2500);
    })
    .then(() => {
      if (this.get('password') === 'p@ssw0rd') {
        return '$ud0t0k3n';
      }
      
      return Ember.RSVP.reject('Password incorrect');
    });
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.delete-blog {
  border: 1px solid #444;
  padding: 1em;
}

templates.application.hbs

<h1>Passing Deferreds Down</h1>
<p>
  In this Twiddle, we show how a parent component can wait for a child component to complete some asynchronous action that the parent initiates. In this example, the parent is a <code>component:delete-blog</code>, which requires the user enter "sudo mode" by entering their password into a <code>component:sudo-field</code>. The flow is as follows:
</p>
<ol>
 <li>The user submits the form, triggering an action on the parent</li>
 <li>The parent creates an RSVP <em>deferred object</em>, which it passes down to the child</li>
 <li>The child exchanges the password for a sudo token and resolves the <code>RSPV.Deferred</code> with the token</li>
 <li>The parent uses the token to make the <em>delete-blog</em> request</li>
</ol>

{{delete-blog name="Weasels of the World"}}

<p>
  We might use this technique for any situation where a <em>parent</em> initiates an asynchronous action that the <em>child</em> is responsible for completing. If the user can cancel the action, we might use a
  <a href='http://ember-concurrency.com/#/docs/cancelation' taret='_blank'>cancelable ember-concurrency task</a>
  instead of an RSVP deferred object. This is a great interface for a modal-dialog that asks for confirmation for some action.
</p>

templates.components.delete-blog.hbs

<form {{action 'submit' on='submit'}}>
  To delete the blog "{{name}}", you must enter your password.

  {{sudo-field deferred=sudoDeferred}}
  
  {{#if message}}
    <div>{{message}}</div>
  {{/if}}

  {{#if isWorking}}
    ⌛️
  {{else if isDone}}
    ✅
  {{else}}
    <input type='submit' value='Delete' />
  {{/if}}
</form>

templates.components.sudo-field.hbs

<label for='sudo-password'>Password:</label>
{{input id='sudo-password' value=password}}
🔒

twiddle.json

{
  "version": "0.10.6",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {}
}