CODEWITHSUNDEEP
ember.js
Raphi
Raphi

Reputation: 430

Ember TypeError: unsupported content on calling controller func

So I'm pretty fresh to Ember and encountered a TypeError exception saying 'unsupported content' and was able to find very little docs/content in general regarding the cause of this in relation to Ember. What triggers this exception is attempting to call functions from my controller in a template...

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!';
  }
});

dashboard.hbs

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

While the template can successfully loop over the array passed in, attempting to call the function 'something' raises the error and prevents the template from loading. Any ideas what I'm messing up here?

Upvotes: 2

Views: 1609

Answers (1)

Daniel
Daniel

Reputation: 18692

Using computed property should fix the issue:

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

Computed properties are core concept in Ember to understand. They are backed by function which you have to provide and they cache return values.

What you were trying to do was, instead of using computed property, displaying a function. It's unsupported in HTMLBars and will raise TypeError:

Uncaught TypeError: unsupported content

Why is that? It's because of underlying HTMLBars logic. It checks the type of content you try to display:

var type = typeof content;

And then, depending on type, it chooses the correct approach to display value in 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');
}

As you can see - there's no case for function, it goes all the way to default handler. You can't display function this way, Ember doesn't know whether it should execute it first and display result of a function or to display function body.

Upvotes: 12

Related Questions