Ember Computed Property on Array

Question

私はEmber初心者ですので、明白な何かを忘れてしまった場合は私を許してください（私はこの問題をGoogleで探知して解決策を見つけるのに時間を費やしましたが）計算されたプロパティは、長さのような配列のプロパティについて文書化されている/意図されたとおりに動作しません。

私は自分のキューを構築しようとしている：

// 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を試してみましたが、それでも違いはありません。何かが正しくない...

私はWikiに追加して喜んでブログ記事を書いてくれて、ありがとうございました。 :-)

ありがとう！ Emberをすごく素晴らしいものにしてくれてありがとう！

Answer 1

私はあなたのコードサンプルの最上部に不足しているコードのビットがあります別名

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