vendredi 18 août 2017

How can a component obtain a value synchronously from its parent?

Consider the following Ember component which is using Semantic UI:

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['ui', 'mini', 'modal'],
  didInsertElement() {
    this.$().modal({
      onApprove: () => {
        let promise = // obtain promise from parent... somehow
        promise.then(() => {
          this.$().modal('hide');
        });
        return false;
      }
    });
  }
});

The modal dialog is initialized as soon as the element is accessible. The onApprove option specifies a callback to be invoked when the user clicks "OK" in the dialog. The component's parent supplies an Ember.RSVP.Promise, which when resolved, closes the dialog.

Herein lies the problem — how do I obtain the promise from the parent? I considered the following possibilities:

  • The parent could supply an action to be invoked:

    
    
    

    However, actions cannot return values, so although the component could invoke the action, it could not use it to obtain the promise.

  • The parent could supply the promise as a bound property:

    
    
    

    The problem with this approach is that didInsertElement() cannot obtain the promise itself since the component must wait for the promise property to mutate.

Is there a way for a component to ask the parent for a value in a synchronous manner?




Aucun commentaire:

Enregistrer un commentaire