阵列上的Ember计算属性

时间:2016-11-27 01:32:44

标签: javascript asynchronous ember.js computed-properties

我是一个Ember新手,所以请原谅我,如果我错过了一些显而易见的事情(我花时间搜索这个问题但仍然无法找到解决方案)但似乎我认为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')都是{{1} }}

奇怪的是,只要我向队列添加项目,就会定义队列长度undefined并在我添加队列项时保持并同步模板。因此,第一个1, 2, 3, ...会自动更新模板,以显示队列长度为&#39; 0&#39;然后&#39; 1&#39;等等。

为什么在我排队任何物品之前它未定义?我尝试根据Unconsumed Computed Properties Do No Trigger Observers添加获取所有地方,但这似乎没有帮助。

有什么想法吗?我完全有可能在这里误解了有关计算属性的内容,但我不明白为什么以及为什么......我已经尝试了$E.get('processingQueue').enqueue('foo')以及所有这些我可以&#39;要做到这一点也要有所作为。有些事情不对......

任何帮助都会非常感激,我愿意添加到Wiki,撰写博客文章,并将我的队列作为开源发布,谢谢。 : - )

谢谢!再次感谢让Ember如此出色!

1 个答案:

答案 0 :(得分:1)

我会替换像

这样的计算属性
length: Ember.computed('items.length', function() {
  return this.get('items.length');
}),

带别名

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