CODEWITHSUNDEEP
ember.jsember-data
maletor
maletor

Reputation: 7122

Loading Promise in Handlebars templates based on volatile computed property

I'm building an asynchronous component for a sidebar that lists people you may know, a result set from an API.

The code below works to add these items to the page as they become available to the store. When the user logs out, I call unloadAll(), however, my recommendations computed property is volatile() so it's not cached and will populate with new entries for the next user (or the same) that logs into the application instance.

// app/services/invite.js

recommendations: Ember.computed(function() {
  return this.get('store').findAll('recommendation');
}).volatile(),

// app/templates/components/people-you-may-know.hbs

{{#each invite.recommendations as |person|}}
  {{...}}
{{/each}}

// app/components/people-you-may-know.js

export default Ember.Component.extend({
  invite: Ember.inject.service()
})

I think I need a new computed property like below, but this is where I'm struggling with blank pages and infinite loops.

reducedRecommendations: Ember.computed('recommendations', function()
  return this.get("recommendations").slice(0, 10);
}),

{{#each invite.reducedRecommendations as |person|}}
  {{...}}
{{/each}}

Upvotes: 1

Views: 163

Answers (2)

Ember Freak
Ember Freak

Reputation: 12872

this.get('store').findAll('recommendation')

This will return live arrays, which means whenever store is updated with new value then it will be updated automatically. so always it will be sync with store. In that case you dont require volatile computed property.

recommendations: Ember.computed(function() {
  return this.get('store').findAll('recommendation');
}).volatile(),

reducedRecommendations: Ember.computed('recommendations', function()
  return this.get("recommendations").slice(0, 10);
}),

In the above code, reducedRecommendations - As this is requesting recommendations and it's changing recommendations property then again it will call reducedRecommendations this infinite loop will get started. since you are forcing to recompute recommendations trough vloatile. If you just remove volatile and change dependence key to recommendations.[] will work seamless.

recommendations: Ember.computed(function() {
      return this.get('store').findAll('recommendation');
    })

reducedRecommendations: Ember.computed('recommendations.[]', function()
  return this.get("recommendations").slice(0, 10);
}),

Upvotes: 2

Ebrahim Pasbani
Ebrahim Pasbani

Reputation: 9406

volatile is not related to session cache. volatile caching means that computed property is not going to be cached and you need to get that to be calculated.

So I think you don't need to volatile and in recommendation CP just do your logic for current user and return the result.

Upvotes: 0

Related Questions