ember.js - 如何从 Ember 中的模板调用 Controller 函数？

Question

假设我有一个模板，它迭代一组项目，我想对每个特定于 Controller 的项目调用一个函数，而不是模型级别的关注:

{{#each people as |person|}}
  icon name: {{findIconFor(person)}}
{{/each}}

我想定义 findIconFor在 Controller 中，因为这是特定于这个特定 View 的东西。

export default Ember.Controller.extend({
  findIconFor: function(person) {
    // figure out which icon to use
  }
);

但这不起作用。 模板无法编译。解析错误:需要 'STRING'、'NUMBER'、'ID'、'DATA'，得到 'INVALID'

什么是“ Ember 方式”来做到这一点？

Answer 1

我会在 Controller 中使用计算属性:

iconPeople: Ember.computed('people.@each', function(){
  var that = this;
  return this.get('people').map(function(person){
    return {
      'person': person,
      'icon': that.findIconFor(person)
    };
  });
})

现在您可以从 {{person.icon}} 获取图标和来自 {{person.person.name}} 的名字.您可能希望对此进行改进(并且代码未经测试)，但这是总体思路。