1

I am using Ember for my webapp and I have this piece of code :

  canAcceptPayPal: computed('data.event.paymentCurrency', function() {
return this.get('store').queryRecord('setting', {})
  .then(setting => {
    console.log(setting);
    console.log(setting.paypalSandboxUsername || setting.paypalLiveUsername);
    return false;
  });

}),

But this only returns a promise and not the boolean value. I am using it in handlebars as :

 {{#if canAcceptPayPal}}

What am I missing here?

Solution
As Amandan pointed out, re-rendering inside the then call worked:

canAcceptPayPal: computed('data.event.paymentCurrency', function() {
this.get('store').queryRecord('setting', {})
  .then(setting => {
    this.set('canAcceptPayPal', (setting.paypalSandboxUsername || setting.paypalLiveUsername) && find(paymentCurrencies, ['code', this.get('data.event.paymentCurrency')]).paypal);
    this.rerender();
  });

}),

LocalPCGuy
  • 6,006
  • 2
  • 32
  • 28
  • exactly, because it's still asynchronous ... `.then(value => console.log(value))` and value will be the false you are looking for - i.e. your quest to get a result synchronously using promises is destined to fail – Jaromanda X Jun 08 '18 at 06:50
  • So how do I return it so that it is reflected in the handlebars file? – Mayank Vaidya Jun 08 '18 at 06:52
  • You can delay rendering until the response comes (i.e. render from inside `then`); or you can render a placeholder, or a default "No", then set the value to the model and re-render from inside `then`. There's no escaping Time; you can't "return" from async because you'd need a time machine to go back in time when that code was executing. You can't both have async, and get the result _now_. Basically, any value obtained from async can only be used in callback, or in a function called from callback. – Amadan Jun 08 '18 at 07:00
  • @Amadan Thanks `this.rerender()` inside then worked :) – Mayank Vaidya Jun 08 '18 at 07:13
  • 3
    Computed properties are meant to be 'pure functions' that have no side-effects. Setting a value and using this.rerender() within the computed function is not recommended and is liable to create problems for you down the line. Assuming that you're going to want to access settings several places in your app, I'd suggest creating it as a service that you can then inject into your app wherever you need it. In addition, the `ember-concurrency` add-on can be very helpful in giving you greater control over async functions. – casafred Jun 08 '18 at 09:26

0 Answers0