javascript - 组件如何从其父组件同步获取值？

Question

考虑以下使用 Semantic UI 的 Ember 组件:

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;
      }
    });
  }
});

一旦元素可访问，模态对话框就会被初始化。 onApprove 选项指定当用户在对话框中单击“确定”时调用的回调。该组件的父级提供一个 Ember.RSVP.Promise ，解决后关闭对话框。

这就是问题所在——我如何获得 parent 的 promise ？我考虑了以下可能性:

• 父级可以提供要调用的操作:

  {{modal-dialog action='getPromise'}}
  

  但是， Action 不能返回值，因此虽然组件可以调用 Action ，但不能使用它来获得 promise 。

• 父级可以将 promise 作为绑定(bind)属性提供:

  {{modal-dialog promise=promise}}
  

  这种方法的问题是 didInsertElement() 无法获取 promise 本身，因为组件必须等待 promise 属性发生变化。

  <

有没有办法让组件以同步方式向父级请求值？

Answer 1

闭包操作将返回值，因此您可以在闭包操作中返回 Promise。

{{modal-dialog getPromise=(action 'getPromise'}}

如果 getPromise 方法正在返回 promise ，那么您可以像这样获取它 let promise = this.get('getPromise')()