Handlebars not rendering content from model correctly

Question

I'm having some trouble rendering content from an Ember Model. It's a 'news' model that I'm trying to display it's content; it is HTML text and so when I go to render it in the template I tried using the triple curly braces however nothing displays. When I just use the normal double braces all I get is this:

<App.News:ember291:14>

Instead of the actual content that's in the model. I've checked using the Ember chrome extension and the data does exist properly in the model.

Here's my model, route, and template.

MODEL

App.News = DS.Model.extend({
    title:      DS.attr('string'),
    content:    DS.attr('string'),
    date:       DS.attr('date'),
    author:     DS.attr('string'),
    category:   DS.attr('string'),
    summary:    DS.attr('string')
});

ROUTE

App.NewsItemRoute = Ember.Route.extend({
    model: function(params) {
        return this.store.find('news', params.id);
    }
});

TEMPLATE

<h1>{{ title }}</h1>
<small>{{format-time date}} by {{ author }} in {{ category }}</small>
<hr/>

<p> {{ content }} </p>

The proper title, date, author and category are set however the the content does not.

Answer 1

You have multiple ways to show the content properly:

<p> {{ content.content }} </p>
<p> {{ model.content }} </p>

{{#with model}}
  {{content}}
{{/with}}

http://emberjs.jsbin.com/pivet/1/edit

When you return an array or object in your model hook, Ember would auto-generate an ArrayController or ObjectController for each case, and assign your model content to its content property.

In your case, an ObjectController inherits of ObjectProxy which forwards all properties not defined by itself to its proxied content property, however the content property is not proxied.

Because of this proxy ability, you could read data in both formats:

{{model.title}} === {{title}}

But, it does not work in your content property.