CODEWITHSUNDEEP
ember.jsember-data
David
David

Reputation: 10738

how to display a loading visual when waiting on related models to load with emberjs

What is the best way to hook into a hasMany relationships loading promise in ember data? This is not the primary model so a loading route isn't relevant. I already have the main model, Project, loaded and my template displays its related RequestMatchers. It's the RequestMatchers i'd like to set a property on the ProjectController or something to display a loading visual queue. This is what i have currently.

/models/project.js

import DS from 'ember-data';

export default DS.Model.extend({
    title: DS.attr('string'),
    private: DS.attr('boolean'),
    requestMatchers: DS.hasMany('request-matcher', {async: true}),
    responses: DS.hasMany('response', {async: true})
});

/templates/project.hbs

{{#each matcher in requestMatchers}}
 //render requestMatchers
{{/each}}

I'd like to do something like this but i don't know how to hook into that async request for the RequestMatchers promise. 

{{#if requestMatchersLoading}}
    Loading request matchers...
{{/if}}

{{#each matcher in requestMatchers}}
 //render requestMatchers
{{/each}}

Upvotes: 0

Views: 119

Answers (2)

Louay Alakkad
Louay Alakkad

Reputation: 7408

Don't depend on isFulfilled as it only becomes true if loading succeeds. Use isPending instead.

You can also check isRejected and add a reload button if needed.

{{#if isFulfilled}}
  Done loading.
{{else}}
  {{#if isPending}}
    Loading...
  {{else}}
    Restart!
  {{/if}}
{{/if}}

Upvotes: 2

Alexphys
Alexphys

Reputation: 408

Use isFulfilled flag

{{#if requestMatchers.isFulfilled}}
  {{#each matcher in requestMatchers}}
     //render requestMatchers
  {{/each}}
{{else}}
   Loading request matchers...
{{/if}}

Upvotes: 1

Related Questions