1

Some parts of my ember.js application have to refresh and it takes several secends (for instance sorting elements in the loop). I would like to display loading image in the time of running through handlebars loop #each. How to do it?

{{#each}}
    {{! display some big data}}
{{/each}}

I don't want to do any ajax request indicator, only during loop, and I have to display all the data at one time.

Mateusz Nowak
  • 4,021
  • 2
  • 25
  • 37

1 Answers1

0

Weird request but here you go...

In case you want to show the results that are fetched via the server.

{{#if bigData.isFulFilled}}
  {{#each object in bigData}}
    <! display some big data>
  {{/each}}
{{else}}
  <! display some loading helper here>
{{/if}}

In other case , that your bottleneck is the processing speed ,maybe pass the array you want to show in a Ember.run block in the controller ,ensuring your array will be flushed only at the end of the loop.

App.BigDataController = Ember.Controller.extend({
  bigData: (function() {
    Ember.run(function() {
     <do your stuff here>
    });


  }).property()

});

After that do something like the above:

{{#if bigData}}
  {{#each object in bigData}}
    <! display some big data>
  {{/each}}
{{else}}
  <! display some loading helper here>
{{/if}}

There's a cool example here showing the Ember.run and explained at this post.

Community
  • 1
  • 1
Alexphys
  • 408
  • 4
  • 11
  • It is not going to work. Handlebars #each is going to iterate approximetly 2 seconds. I won't have loading image during it in this case. – Mateusz Nowak Jun 29 '14 at 20:59
  • You are right, my mistake that I thought your problem was fetching records remotely. I've updated my answer – Alexphys Jun 29 '14 at 21:19