在解决 RSVP 之前等待其他交互发生

Question

我有一个组件，它在滑动时会向上发送一个动作到父路由/控制器来处理一些 ajax 功能。该组件有一些 UI 设置为加载状态，以向用户显示正在发生的事情。当 working 设置回 false 时，UI 中的加载动画会停止，用户交互可能会再次发生。

callAjaxAction() {
  this.setProperties({working:true});
  Ember.RSVP.cast(this.attrs.action()).finally(() => {
    this.$('.draggable').animate({
      left: 0
    });
    this.setProperties({working:false});
  });
}

在这种情况下，控制器捕获组件定义上指定的操作并调用 ajax 函数来获取一些数据以显示在页面中

// in the controller action
return Ember.RSVP.Promise((resolve,reject) => {
    Ember.$.ajax({
      type: 'get',
      dataType: 'json',
      url: `http://***/api/paysources/user/697?key=${ENV.APP.api_key}`
    }).then((response)=>{
      this.setProperties({
        'cards':response.user_paysources,
        'showCards': true
      });
    },(reason)=>{
      reject();
      this.get('devlog').whisper(reason);
    })
  })

这将显示一种新的弹出式组件类型，允许用户选择一张卡进行支付。如果用户点击离开，或者如果他们点击一张卡片并且 ajax 操作完成，我不仅需要在此页面上重置 UI（更改它以显示购物车已付款），还需要发送滑动组件（一个现在有一个加载动画）告诉它加载完成的东西。

基本上，按照我的想法，有没有办法从父控制器/路由对组件触发操作？

Answer 1

回答您的问题“有没有办法从父控制器/路由对组件触发操作？”：不，没有。但是，我可以想到在 Ember 中执行此操作的两种惯用方式：

1. 您可以通过将 Ajax 请求移动到组件中来绕过它。
2. 关注'data down, actions up' pattern。请参阅以下示例，了解如何实现它。

您可以在 card 组件上触发一个操作，以更改控制器上的属性。然后将该属性监听到原始组件中，以便它可以更新。

original-component.js

reset: computed('transactionComplete', function() {
  // cleanup stuff here...
})

原始组件模板.hbs

{{#if transactionComplete}}
  {{! stuff to show when transaction is complete... }}
{{/if}}

controller.js

transactionComplete: false,

actions: {
  completeTransaction() {
    this.toggleProperty('transactionComplete');
  }
}

controller-template.hbs

{{original-component
  transactionComplete=transactionComplete
}}

{{cart-component
  transactionComplete=(action 'completeTransaction')
}}

cart-component.js

actions: {
  processTransaction() {
    // cleanup stuff here...
    this.attrs.transactionComplete();
  }
}

可能有不同且更好的方法来执行此操作，但这取决于您在重置原始组件时需要做什么。

另外，您是否考虑过使用 ember 数据和路由来加载卡片？