title: Ember / Handlebars giving [object Object] instead of string from JSON object
body: <h1>Overview</h1>
  
  <p>Hello, I am learning Ember.js and I am connecting to a Wordpress site I control via the Wordpress JSON API plugin.</p>
  
  <p>Using the JSON API from the plugin I'm able to easily pull in the WordPress post title, author name, publish date, post excerpt, etc for any post without problems. However, when I try and use the post content, I get <strong>[object Object]</strong> back instead of the expected string. </p>
  
  <p>Looking directly at the JSON object I'm working with, both excerpt and content are items in the JSON object which are each equal to a string of HTML. The only difference between the two appears to be the length of the string. using <code>{{{excerpt}}}</code> returns the string and allows the HTML to be properly formatted while <code>{{{content}}}</code> just prints out <strong>'[object Object]'</strong>.</p>
  
  <h1>The Handlebars Template</h1>
  
  <pre><code>&lt;script type="text/x-handlebars" id="post"&gt;
    &lt;div class="post"&gt;
      &lt;h1&gt;{{title}}&lt;/h1&gt;
      &lt;h2&gt;by {{author.name}} &lt;small class="muted"&gt;({{date}})&lt;/small&gt;&lt;/h2&gt;
  
      &lt;hr&gt;
  
      &lt;div class="below-the-fold"&gt;
        {{{content}}}
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <h1>The Rendered HTML by Ember</h1>
  
  <pre><code>&lt;div class="post"&gt;
    &lt;h1&gt;Sample Post&lt;/h1&gt;
    &lt;h2&gt;by Boydbme &lt;small class="muted"&gt;(2015-01-10 11:32:36)&lt;/small&gt;&lt;/h2&gt;
  
    &lt;hr&gt;
  
    &lt;div class="below-the-fold"&gt;
      [object Object]
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>the JSON object I'm working with</h1>
  
  <pre><code>post: {
      id: 1306,
      type: "post",
      slug: "sample-post",
      url: "#removed_for_stack_overflow",
      status: "publish",
      title: "Sample Post",
      title_plain: "Sample Post",
      content: "&lt;p class="p1"&gt;&lt;span class="s1"&gt;Lorem harum fuga.&lt;/span&gt;&lt;/p&gt; &lt;p class="p1"&gt;&lt;span class="s1"&gt;Lorem dolor fuga.&lt;/span&gt;&lt;/p&gt; &lt;p class="p1"&gt;&lt;span class="s1"&gt;Lorem ipsuuga.&lt;/span&gt;&lt;/p&gt; &lt;p class="p1"&gt;&lt;span class="s1"&gt;Lorem dolor&lt;/span&gt;&lt;/p&gt; &lt;p class="p1"&gt;&lt;span class="s1"&gt;Lorem harum fuga.&lt;/span&gt;&lt;/p&gt;",
      excerpt: "&lt;p&gt;Lorem ipsum dolor sit fuga.&lt;a class="read-more" href="#removed_for_stack_overflow"&gt;Read More &amp;raquo;&lt;/a&gt;&lt;/p&gt; ",
      date: "2015-01-10 11:32:36",
      modified: "2015-01-10 11:32:36",
      categories: [],
      tags: [],
      author: {},
      comments: [],
      attachments: [],
      comment_count: 0,
      comment_status: "closed",
      thumbnail: "#removed_for_stack_overflow",
      custom_fields: {},
      thumbnail_size: "post-thumbnail",
      thumbnail_images: {}
  },
  </code></pre>
  
  <p>Any help would be greatly appreciated. My confusion comes from being able to use <code>{{{excerpt}}}</code> and get a string in my template as expected, but being unable to do the same with <code>{{{content}}}</code>.</p>
  
  <p>Thanks!</p>
  
  <h1>Update:</h1>
  
  <p>@rené got it right in the comment below. <code>{{{content.content}}}</code> fixes the issue because I was colliding with an internal object.</p>