Ember TypeError:调用控制器func时不支持的内容

Question

所以我对Ember很新鲜并遇到一个TypeError异常,说"不支持的内容",并且能够找到关于Ember的原因的一般文档/内容.触发此异常的原因是尝试在模板中调用控制器中的函数...

路线/ dashboard.js

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

控制器/ dashboard.js

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

dashboard.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理解的核心概念.它们由您必须提供的功能支持,并且它们会缓存返回值.

你要做的是,而不是使用计算属性,显示一个function.它在HTMLBars中不受支持并将引发TypeError:

未捕获的TypeError:不支持的内容

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

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,它一直到default处理程序.你不能这样显示function,Ember不知道它是应该先执行它还是显示功能的结果还是显示功能体.