mardi 16 février 2016

Computed property doesn't get updated on the frontend

I have a component called scanstart-participants-count this component will show the total count of participants added to a specified scan & target audience. in my Handlebar i call the component with {{scanstart-participants-count scan=scan targetAudience=targetAudience}} and this works all correct, except when the isValid column in my participant model changes to true to frontend count stays on 0. I just can't figure out what i am doing wrong

Component: scanstart-participants-count.js

import Ember from 'ember'

export default Ember.Component.extend({
    tagName:           'div',
    classNames:        'participant',
    scan:              null,
    targetAudience:    null,

    scanParticipants:  Ember.computed('scan.id', 'targetAudience.scanParticipants.[]', function () {
        // Default properties
        const scanId           = this.get('scan.id')
        const scanParticipants = this.get('targetAudience.scanParticipants')

        console.log('scanParticipants count scan: '+scanParticipants.filterBy('scan.id', scanId).get('length')) // Correct output

        // Filter by scan ID.
        return scanParticipants.filterBy('scan.id', scanId)
    }),
    participants:      Ember.computed('scanParticipants.[]', function () {
        // Default properties
        const scanParticipants = this.get('scanParticipants')

        // Map by participant
        return scanParticipants.mapBy('participant')
    }),
    participantsValid: Ember.computed('participants.@each.isValid', function () {
        // Default properties
        const participants = this.get('participants')

        console.log('participants count: '+this.get('participants').get('length')) // Correct output
        console.log('participants valid count: '+this.get('participants').filterBy('isValid', true).get('length')) // Correct out put when loads first time, nothing happens when the isValid column change's to true. (First time: isValid = true = 0, isValid = false = 3)

        // Filter by isValid = true.
        return participants.filterBy('isValid', true)
    })
})

Component handlebar

{{targetAudience.title}}: <span class="{{if participantsValid.length '_muted' '_danger'}}">{{participantsValid.length}}</span>




Aucun commentaire:

Enregistrer un commentaire