Question

我有一个组件，在滑动时会向上发送一个动作到父路由/控制器来处理一些ajax功能。此组件具有一些设置为加载状态的UI，以向用户显示正在发生的事情。当工作设置回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

要回答你的问题＆＃34;有没有办法从父控制器/路由触发组件上的动作？＆＃34;：不，没有。然而，在Ember中我可以想到两种惯用的方式：

您可以通过将Ajax请求移动到组件中来解决它。
关注'data down, actions up' pattern。请参阅以下内容作为如何实现它的示例。

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

<强>原始component.js

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

<强>原始组分-template.hbs

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

<强> controller.js

transactionComplete: false,

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

<强>控制器template.hbs

{{original-component
  transactionComplete=transactionComplete
}}

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

<强>推车component.js

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

可能有不同的方式，也有更好的方法，但这取决于您在重置原始组件时需要做什么。

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

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

1 个答案: