Count generated by model (through pivot table) not shown - ember.js

Question

I am trying to get the count of how many people participated in a scan.
at this moment i need 2 counts:
Total participants count
Total finished count
i made a pivot table in Ember that holds specific data about the participant, like he finished the scan or not.
My model:
import DS from 'ember-data';
var inflector = Ember.Inflector.inflector;
inflector.irregular('scan', 'scan');
var scanModel = DS.Model.extend({
title: DS.attr('string'),
mailInviteSubject: DS.attr('string'),
mailInviteMessage: DS.attr('string'),
mailResponseAddress: DS.attr('string'),
dateDeadline: DS.attr('date'),
scanGroup: DS.belongsTo('scanGroup', {async: true}),
questionGroups: DS.hasMany('question-group', {async: true}),
/**
* Participants
*/
scanParticipants: DS.hasMany('scanParticipants', {async: true}),
participants: Ember.computed('scanParticipants.#each.participants', function () {
return this.get('scanParticipants').then(function(scanParticipants) {
return scanParticipants.mapBy('participant');
})
}),
participantsCount: Ember.computed('scanParticipants', function () {
return this.get('scanParticipants').then(function (participants) {
return participants.get('length');
});
}),
participantsCountFinished: Ember.computed('scanParticipants', function () {
return this.get('scanParticipants').then(function (participants) {
return participants.filterBy('finished', true).get('length');
});
}),
isClosed: Ember.computed('dateDeadline', function () {
let scanDate = moment(this.get('dateDeadline'));
let date = moment();
if(scanDate < date)
return true;
else
return false;
}),
});
export default scanModel;
I have the following template:
<td>{{input type="checkbox" checked=isChecked action="scanChecked"}}</td>
<td>
<h2>{{scan.title}}</h2>
Verloopt op {{format-date scan.dateDeadline format="DD MMMM"}} <small class="_muted">({{#if scan.isClosed}}Afgerond{{else}}Over{{/if}} {{format-date scan.dateDeadline type='remaining'}} geleden)</small>
</td>
<td>
<h2>{{scan.participantsCount}}</h2>
<small class="_muted">uitgenodigd</small>
</td>
<td>
<h2>{{scan.participantsCountFinished}}</h2>
<small class="_muted">voltooid</small>
</td>
<td class="_align-right">
{{#link-to 'scangroup.scan' scan.id class="btn btn-inverted btn-small"}}Bekijk{{/link-to}}
</td>
The problem now is, is that {{scan.participantsCount}} and{{scan.participantsCountFinished}} shows [Object Object] in my template instead of the counts.
But if i log the counts in the promise i get the good count that should be displayed in the template.
How does it come that it show's [Object Object] instead of the count, and how can i make it possible to show the count?
Thanks in advance!
Kindly regards,
Pascal

Answer 1

You are observing the property itself instead of the array. This means that they will only re-compute when scanParticipants change value, like this.set('scanParticipants', someValue) and not when it updates. To fix this you can do Ember.computed('scanParticipants.[]', function() {.
You are seeing [Object Object] because that's the promise that's being returned from the computed properties. When you return a promise from a computed property you need to wrap it in a PromiseObject or PromiseArray, but Ember Data does this for you already for relationships.
There are a couple of approaches possible to fix this problem:
You can use {{scan.scanParticipants.length}} in the template
You can declare participantsCount: Ember.computed.alias('scanParticipants.length')
You can do participantsCount: Ember.computed('scanParticipants.[]', function () { return this.get('scanParticipants.length'); })
Notice that you also have an Ember.computed.filterBy method.