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选项指定当用户单击＆＃34; OK＆＃34;时调用的回调。在对话框中。组件的父级提供Ember.RSVP.Promise，解析后会关闭对话框。

这就是问题所在 - 我如何从父母那里获得承诺？我考虑了以下几种可能性：

父母可以提供要调用的动作：
```
{{modal-dialog action='getPromise'}}
```
但是，操作不能返回值，因此虽然组件可以调用操作，但它无法使用它来获取promise。
父母可以将承诺作为绑定属性提供：
```
{{modal-dialog promise=promise}}
```
这种方法的问题是didInsertElement()无法获取promise本身，因为组件必须等待promise属性变异。

组件是否有办法以同步方式向父级询问值？

Answer 1

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

<audio id="shakeBell"  src="audio/bell-ringing-02.mp3" preload="auto"></audio>
<audio id="shakeShake"  src="audio/pill-bottle-1.mp3" preload="auto"></audio>
<audio id="blowWhistle"  src="whistle-flute-2.mp3" preload="auto"></audio>

<div class="imagelist">
    <img src="images/Golden_Bell.png" style="width:100px; height 100px;" onClick="playSound("shakeBell)">
    <img src="images/Maracas.png" style="width:100px; height:100px;" onClick="playSound("shakeBell)">
</div>

如果getPromise方法返回promise，那么你可以像{{modal-dialog getPromise=(action 'getPromise'}}

那样得到它

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

1 个答案: