Question

我有一个名为scanstart-participants-count的组件，此组件将显示添加到指定扫描的参与者总数。目标观众。在我的Handlebar中，我使用{{scanstart-participants-count scan=scan targetAudience=targetAudience}}调用该组件，这一切都正常，除非isValid模型中的participant列更改为true，前端计数保持在{{ 1}}。我只是无法弄清楚我做错了什么

组件：scanstart-participant-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 "participants.content.@each.participantValid" to "participants.@each.participantValid" after update to 2.3.0
    participantsValid: Ember.computed('participants.content.@each.participantValid', 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)
    })
})

型号：target-audience.js

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

型号：scan-participant.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}),
})

型号：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})
})

代码更新现在的情况17-02-2016 *

版本信息
恩伯：2.1.0
Ember数据：2.1.0
jQuery：1.11.3
Ember Simple Auth：1.0.0

Answer 1

我想也许this bug会导致你的问题。 participants是一个PromiseArray（由于异步关系），@each目前已被打破。

替换此

participantsValid: Ember.computed('participants.@each.isValid', function () {

与

participantsValid: Ember.computed('participants.content.@each.isValid', function () {

作为临时错误修正。

Answer 2

在花费了大量代码和@Lux的解决方案后，@ Grapho＆amp; @Gaurav。

在花了超过一个星期的时间后，这个bug终于工作了，真正的问题依赖于我无法弄清楚，因为在它工作之后我尽可能地将它改回旧代码并保持正常工作，低于工作代码：

组件：scanstart-participant-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('participants.@each.isValid', function () {
        // Default properties
        const participants = this.get('participants')

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

型号：participant.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
    }),
})

计算属性不会在前端更新

2 个答案: