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'),