3

Overview

Hello, I am learning Ember.js and I am connecting to a Wordpress site I control via the Wordpress JSON API plugin.

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 [object Object] back instead of the expected string.

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 {{{excerpt}}} returns the string and allows the HTML to be properly formatted while {{{content}}} just prints out '[object Object]'.

The Handlebars Template

<script type="text/x-handlebars" id="post">
  <div class="post">
    <h1>{{title}}</h1>
    <h2>by {{author.name}} <small class="muted">({{date}})</small></h2>

    <hr>

    <div class="below-the-fold">
      {{{content}}}
    </div>
  </div>

The Rendered HTML by Ember

<div class="post">
  <h1>Sample Post</h1>
  <h2>by Boydbme <small class="muted">(2015-01-10 11:32:36)</small></h2>

  <hr>

  <div class="below-the-fold">
    [object Object]
  </div>
</div>

the JSON object I'm working with

post: {
    id: 1306,
    type: "post",
    slug: "sample-post",
    url: "#removed_for_stack_overflow",
    status: "publish",
    title: "Sample Post",
    title_plain: "Sample Post",
    content: "<p class="p1"><span class="s1">Lorem harum fuga.</span></p> <p class="p1"><span class="s1">Lorem dolor fuga.</span></p> <p class="p1"><span class="s1">Lorem ipsuuga.</span></p> <p class="p1"><span class="s1">Lorem dolor</span></p> <p class="p1"><span class="s1">Lorem harum fuga.</span></p>",
    excerpt: "<p>Lorem ipsum dolor sit fuga.<a class="read-more" href="#removed_for_stack_overflow">Read More &raquo;</a></p> ",
    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: {}
},

Any help would be greatly appreciated. My confusion comes from being able to use {{{excerpt}}} and get a string in my template as expected, but being unable to do the same with {{{content}}}.

Thanks!

Update:

@rené got it right in the comment below. {{{content.content}}} fixes the issue because I was colliding with an internal object.

Improve this question
4
  • 3
    Try replacing {{{content}}} by {{log content}}, and watch the Console. content is used for some internal stuff by Ember and Ember Data, particularly for Promise arrays and IIRC also in DS.Model. Most likely, you will need {{{content.content}}} instead, but it depends on what class instance gets passed to Handlebars in the end. Commented Jan 10, 2015 at 18:01
  • @René {{{content.content}}} did the trick! Is there something else I could be doing that would prevent this behavior? {{{this.content}}} didn't fix the error, but {{{content.content}}} just doesn't seem right to me. Commented Jan 10, 2015 at 18:38
  • content, in this case, is where the actual properties are. When you use a different property, like excerpt, it calls this.get('excerpt'), which will in turn call this.get('content').get('excerpt'), basically. I think the only options are to use content.content, or to rename the content properties in your Models, if you can. Commented Jan 10, 2015 at 18:42
  • @René That makes sense. Thanks for the explanation! If you want to post your answer below I'll mark it the accepted answer. Commented Jan 10, 2015 at 18:44

2 Answers 2

Reset to default
3

content is used for some internal stuff by Ember and Ember Data, particularly for Promise arrays and IIRC also in DS.Model.

When you use a property in a Handlebars template, internally Ember does something like this.get(propName). In this particular case, your this object probably does not actually have many properties at all, and it just delegates to its own content object: this.get('excerpt') just calls this.get('content').get('excerpt') when it notices that there is no excerpt property on the current object. However, when you ask for content, it just translates to this.get('content'), which does exist, and contains an object.

Most likely, you will need {{{content.content}}} instead, but it depends on what class instance gets passed to Handlebars in the end.

You can use {{log varName}} in Ember Handlebars to debug this sort of problem.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

content is an object, in order to render a JS object into HTML it is cohered into a string using the toString() method. And in this case that is [object Object]. I'm guessing you want the string of JSON. You will need to do one of two things.

Make a computed property that will return a string using the JSON.stringify(this.get('post'), null, 2) Or make a handlebars helper that will do this.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.