Ember在阵列上计算的属性

Question

我是一个Ember新手，所以如果我错过了某些明显的东西（我花了时间Google搜索这个问题，仍然找不到解决方案），请原谅我，但在我看来，Ember计算出来的属性不像按照数组属性（如长度）记录/打算那样工作。

我试图建立自己的队列：

// app/custom-objects/processing-queue-item.js 
import Ember from 'ember'; 

export default Ember.Object.extend({ 
    payload: null, 
    extraContext: null, 
    processingState: 'pending', // pending, succeeded, failed 
    processingOutcome: null, // null for pending, result for  succeeded, error for failed 

    toString() { 
    return `{ProcessingQueueItem: processingState=${this.get('processingState')}, processingOutcome=${this.get('processingOutcome')}, extraContext=${this.get('extraContext')}, payload=${this.get('payload')}}`; 
    } 
}); 

// app/custom-objects/processing-queue.js 
import Ember from 'ember'; 
import ProcessingQueueItem from './processing-queue-item'; 

export default Ember.Object.extend(Ember.Enumerable, { 
    queueName: null, 

init() { 
    this.set('items', []); 
    this.get('items'); 
    this.get('items.length'); 
    this.get('length'); // Force observation 
}, 

/* 
* Public API 
*/ 

enqueue(payload, extraContext = null) { 
let itemToEnqueue = ProcessingQueueItem.create({ payload: payload, extraContext: extraContext }); 

this.get('items').pushObject(itemToEnqueue); 
this.scheduleProcessing(); 

return itemToEnqueue; 
}, 

toString() { 
    return `{ProcessingQueue: queueName=${this.get('queueName')}, length=${this.get('length')}}`; 
}, 

/* 
    * Internal API 
    */ 

scheduleProcessing() { 
    Ember.run(() => { 
    this.maybeProcessAnItem(); 
    }); 
}, 

maybeProcessAnItem() { 
    console.log(`maybe process an item ${this}`); 
}, 

/* 
* Ember.Enumerable mixin 
*/ 

length: Ember.computed('items.length', function() { 
    return this.get('items.length'); 
}), 

nextObject(index, previousObject, context) { 
    return this.get('items').nextObject(index, previousObject, context); 
} 
}); 

这个类是不完整的，但我想开始在模板显示队列内容，以帮助调试，但我不能得到那个工作。这里是我的控制器和模板：

// app/controllers/dashboard.js 
import Ember from 'ember'; 
import ProcessingQueue from '../custom-objects/processing-queue'; 

export default Ember.Controller.extend({ 
    init() { 
    this._super(...arguments); 
    this.set('processingQueue', ProcessingQueue.create({ queueName: 'DashboardQueue' })); 
    this.get('processingQueue'); 
    this.get('processingQueue.length'); 
    this.get('queueLength'); 
}, 

queueLength: Ember.computed('processingQueue.length', function() { 
    return this.get('processingQueue.length'); 
}), 
}); 

// app/templates/dashboard.hbs 
<h1>Dashboard</h1> 

<h2>Queue Length: '{{queueLength}}'</h2> 
{{#each processingQueue as |queueItem|}} 
<p>{{queueItem.payload}}</p> 
{{/each}} 

{{outlet}} 

的问题是，在<h2>Queue Length: '{{queueLength}}'</h2>，队列长度总是不确定的，直到我将项目添加到队列中。但事实并非如此，队列中有一个空阵列并且长度为0.从EmberInspector的仪表板控制器中使用$E，我可以看到$E.get('processingQueue.length')和$E.get('queueLength')都是undefined。

奇怪的是，只要我将项目添加到队列中，队列长度就会变得定义，1, 2, 3, ...并保持同步，并在添加队列项目时同步模板。因此，第一个$E.get('processingQueue').enqueue('foo')会自动更新模板以显示队列长度为'0'，然后'1'等等。

为什么它在我入选任何物品之前未定义？我试图根据Unconsumed Computed Properties Do No Trigger Observers添加获得所有的地方，但这似乎没有帮助。

任何想法？我完全有可能误解这里的计算属性，但我不明白是什么，为什么...我试过volatile(), [], @each以及所有那些，我也无法让它们有所作为。东西是不对的...

任何帮助将非常感激，我会愿意添加到维基，写一篇博客文章，也许释放我的队列作为开放源代码作为谢谢。 :-)

谢谢！并再次感谢使Ember如此真棒！

Answer 1

我将取代计算机的属性，如

length: Ember.computed('items.length', function() { 
    return this.get('items.length'); 
}), 

与别名

length: Ember.computed.alias('items.length'),