I'm facing a challenge that seems simple, but I'm struggling to find the solution.
Currently, I'm working with Emberjs 2.8.
In my model, I have an async: true property set up like this:
models/my-model.js
import DS from 'ember-data';
export default DS.Model.extend({
childModels: DS.hasMany('otherModel', {async: true})
});
There's a component that is responsible for displaying these models:
/components/my-component.js
import Ember from 'ember';
export default Ember.Component.extend({
theModel: // model of type my-model here
})
In some cases, the my-model.childModels may not have any records. What I want to achieve is to show a "no children found" message in the template only after the async call to the server returns an empty response. Ideally, I'd like the template structure to be like this:
templates/components/my-component.hbs
<div>
{{#if theModel.childModels.length == 0}}
// display message saying there are no children
{{else}}
{{#each theModel.childModels as |child}}
// do something
{{/each}}
{{/if}}
</div>
The complexity lies in determining whether the relationship data has been populated from the server. Checking for .length == 0 isn't sufficient as it can trigger before the async call completes, resulting in unnecessary DOM manipulation. I need to find a way to check if theModel.childModels.isLoaded, although I haven't figured out how to do it even after going through the documentation.
If anyone has suggestions on how to tackle this issue, your advice would be greatly appreciated. Thank you in advance!