我是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的所有位置添加gets,但这似乎无济于事。
有任何想法吗?我完全有可能在这里误解了一些有关计算属性的信息,但是我不明白是什么以及为什么……我尝试了
volatile(), [], @each
以及所有这些,但我也无法理解。有点不对劲...任何帮助将不胜感激,我将愿意添加到Wiki,写博客文章,并可能将我的队列作为开源发布,谢谢。 :-)
谢谢!再次感谢您让Ember如此出色!
最佳答案
我将替换像
length: Ember.computed('items.length', function() {
return this.get('items.length');
}),
带别名
length: Ember.computed.alias('items.length'),