Javascript 在解析RSVP之前，等待其他交互发生_Javascript_Ajax_Ember.js

Javascript 在解析RSVP之前，等待其他交互发生

javascript ajax ember.js

Javascript 在解析RSVP之前，等待其他交互发生,javascript,ajax,ember.js,Javascript,Ajax,Ember.js,我有一个组件，在滑动时会向上发送一个动作到父路由/控制器，以处理一些ajax功能。这个组件有一些UI，它被设置为加载状态，以向用户显示正在发生的事情。当working设置为false时，UI中的加载动画停止，用户交互可能再次发生 callAjaxAction() { this.setProperties({working:true}); Ember.RSVP.cast(this.attrs.action()).finally(() => { this.$('.draggab

我有一个组件，在滑动时会向上发送一个动作到父路由/控制器，以处理一些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（更改它，使其显示购物车已经付费），而且还需要发送滑动组件（现在有加载动画的组件）一些信息，告诉它加载完成了

基本上，我在脑海中看到的是，有没有办法从父控制器/路由对组件启动操作？

回答您的问题“有办法从父控制器/路由对组件启动操作吗？”：没有。不过，在Ember中，我可以想到两种惯用方法：

您可以通过将Ajax请求移动到组件中来绕过它

遵循规则。请参见下面的示例，了解如何实现它

您可以在

卡

组件上启动操作，以更改控制器上的属性。然后将该属性监听到原始组件中，以便它可以更新

原始组件.js

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

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

transactionComplete: false,

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

{{original-component
  transactionComplete=transactionComplete
}}

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

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

原始组件模板.hbs

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

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

transactionComplete: false,

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

{{original-component
  transactionComplete=transactionComplete
}}

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

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

controller.js

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

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

transactionComplete: false,

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

{{original-component
  transactionComplete=transactionComplete
}}

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

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

控制器模板.hbs

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

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

transactionComplete: false,

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

{{original-component
  transactionComplete=transactionComplete
}}

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

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

购物车组件.js

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

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

transactionComplete: false,

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

{{original-component
  transactionComplete=transactionComplete
}}

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

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

可能有不同的——更好的——方法，但这完全取决于重置原始组件时需要执行的操作

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

来回答您的问题“是否有方法从父控制器/路由对组件启动操作？”：没有。不过，在Ember中，我可以想到两种惯用方法：