计算的属性不会在前端更新

debugcn 发表于 Dev

索帕瓜（P. Sopacua）

我有一个组件，scanstart-participants-count该组件将显示添加到指定扫描和目标受众的参与者总数。在我的车把中，我用调用了该组件，{{scanstart-participants-count scan=scan targetAudience=targetAudience}}并且一切正常，除非当isValid我的participant模型中的列更改true为前端计数时停留在上0。我只是不知道我在做什么错

组件：scanstart-participants-count.js

从'ember'导入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')
    }),
    // TODO: Change "[email protected]" to "[email protected]" after update to 2.3.0
    participantsValid: Ember.computed('[email protected]', 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('participantValid', false).get('length')) // Correct out put when loads first time, nothing happens when the isValid column change's to true. (First time: participantsValid = true = 0, participantsValid = false = 3)

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

组件车把

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

型号：target-audience.js

import DS from 'ember-data'

export default DS.Model.extend({
    title:                       DS.attr('string'),
    singular:                    DS.attr('string'),
    participantsMin:             DS.attr('number'),
    participantsMax:             DS.attr('number'),
    scanGroups:                  DS.hasMany('scanGroup', {async: true}),
    scanParticipants:            DS.hasMany('scanParticipant', {async: true}),
})

型号：scan-participant.js

import DS from 'ember-data'

export default DS.Model.extend({
    hash:           DS.attr('string'),
    opened:         DS.attr('boolean'),
    finished:       DS.attr('boolean'),
    scan:           DS.belongsTo('scan',           {async: true}),
    results:        DS.hasMany('result',           {async: true}),
    participant:    DS.belongsTo('participant',    {async: true}),
    targetAudience: DS.belongsTo('targetAudience', {async: true})
})

型号：partner.js

import DS from 'ember-data'

var inflector = Ember.Inflector.inflector
    inflector.irregular('participant', 'participant')

export default DS.Model.extend({
    name:             DS.attr('string'),
    email:            DS.attr('string'),
    participantValid: Ember.computed('name', 'email', function () {
        // Default vars
        let name  = this.get('name')
        let email = this.get('email')

        // Set validation status
        if((name !== '') && (email !== ''))
            return true;

        return false
    }),
    targetAudiences:  DS.hasMany('targetAudience', {async: true}),

    /**
     * Scans
     */
    scans:            DS.hasMany('scan',            {async: true}),
    scanParticipants: DS.hasMany('scanParticipant', {async: true}),
})

代码已更新为现在的17-02-2016 *

版本信息
Ember：2.1.0
Ember Data：2.1.0
jQuery：1.11.3
Ember Simple Auth：1.0.0

索帕瓜（P. Sopacua）

在花完代码和@ Lux，@ Grapho和@Gaurav的解决方案之后。

花了一个多星期的时间来解决这个错误之后，它终于可以工作了，真正的问题取决于我，我无法弄清楚，因为在工作之后，我尽可能将其改回旧代码，并且在无法正常工作的情况下仍然可以正常工作代码：

组件：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')

        // 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('[email protected]', function () {
        // Default properties
        const participants = this.get('participants')

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

型号：partner.js

import DS from 'ember-data'

var inflector = Ember.Inflector.inflector
    inflector.irregular('participant', 'participant')

export default DS.Model.extend({
    name:    DS.attr('string'),
    email:   DS.attr('string'),

    targetAudiences:  DS.hasMany('targetAudience', {async: true}),

    isValid: Ember.computed('name', 'email', function () {
        // Default vars
        let name  = this.get('name')
        let email = this.get('email')

        // Set validation status
        if((name !== '') && (email !== ''))
            return true;

        return false
    }),
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。