ember.js - Ember 类型错误 : unsupported content on calling controller func

Question

所以我对 Ember 很陌生，遇到了一个 TypeError 异常，提示“内容不受支持”，并且能够找到很少的文档/内容来说明与 Ember 相关的原因。触发此异常的原因是试图从模板中的 Controller 调用函数...

routes/dashboard.js

export default Ember.Route.extend({
  model: function(params){
    return ['Chart1', 'Chart2', 'Chart3']
  },
  setupController: function(controller, charts) {
    controller.set('charts', charts);
  }
});

controllers/dashboard.js

export default Ember.ArrayController.extend({
  something: function() {
    return 'something!';
  }
});

仪表板.hbs

{{#each chart in charts}} 
  <div class='widget well'>
    {{ chart }}
  </div>
{{/each}}
{{something}} 

虽然模板可以成功循环传入的数组，但尝试调用函数“something”会引发错误并阻止模板加载。知道我在这里搞砸了什么吗？

Answer 1

使用计算属性应该可以解决问题:

export default Ember.ArrayController.extend({
  something: Ember.computed(function() {
    return 'something!';
  })
});

计算属性是 Ember 中需要理解的核心概念。它们由您必须提供的函数支持，并且缓存返回值。

您尝试做的是显示一个函数，而不是使用计算属性。它在 HTMLBars 中不受支持，会引发 TypeError:

Uncaught TypeError: unsupported content

这是为什么呢？这是因为底层的 HTMLBars 逻辑。它会检查您尝试显示的内容的类型:

var type = typeof content;

然后，根据类型，它选择正确的方法在 DOM 中显示值:

switch (type) {
      case 'string':
        if (this.parseTextAsHTML) {
          return this.domHelper.setMorphHTML(this, content);
        }
        return this.setText(content);
      case 'object':
        if (typeof content.nodeType === 'number') {
          return this.setNode(content);
        }
        /* Handlebars.SafeString */
        if (typeof content.string === 'string') {
          return this.setHTML(content.string);
        }
        if (this.parseTextAsHTML) {
          return this.setHTML(content.toString());
        }
      /* falls through */
      case 'boolean':
      case 'number':
        return this.setText(content.toString());
      default:
        throw new TypeError('unsupported content');
}

如您所见 - function 没有 case，它一直到 default 处理程序。您不能以这种方式显示函数，Ember 不知道是应该先执行它并显示函数的结果还是显示函数体。