Content not showing properly in Ember view

Question

I'm new to Ember, and I'm following along with their Todo tutorial and making a basic app to create blog posts, adjust their code for my purposes. The app was working fine until I added an itemController to the template and a controller to handle the isCompleted event. Rather than showing the content, as it did before, it shows: <Posts.Post:ember257:1> which appears to be the model name rather than content. The Ember inspector says the model has the right attribute. It just doesn't display properly. Here's some code:

<script type="text/x-handlebars" data-template-name="posts">
    <section id="postapp">
        <section id="main">
            <ul id="post-list">
                // new code added
                {{#each itemController="post"}}
                <li {{bind-attr class="isCompleted:completed"}}>
                    {{input type="checkbox" checked=isCompleted class="toggle"}}
                    <label>{{title}}</label>
                    <p>{{content}}</p>
                </li>
                {{/each}}
            </ul>
        </section>
    </section>
</script>

And the relevant JavaScript (see the bottom at PostController to see the only change after the code worked):

Posts.Post = DS.Model.extend({
    title: DS.attr('string'),
    content: DS.attr('string'),
    isCompleted: DS.attr('boolean')
});

Posts.Post.FIXTURES = [
    {
        id: 1,
        title: "JavaScript: The Dark Side",
        content: "Here is a bunch of information on the dark side of " + 
            "Javascript. Welcome to hell!" 
    },
    {
        id: 2,
        title: "The glory of underscore",
        content: "Here, we're going to talk about the many uses of the " + 
            "underscore library. Read on!"
    },
    {
        id: 3,
        title: "Objectifying Objects",
        content: "Objects are confusing, eh? Let's play around with objects " +
            "a bit to see how to really use them."
    }
];

// This is the only code that changed before the app was functioning properly
Posts.PostController = Ember.ObjectController.extend({
  isCompleted: function(key, value){
    var model = this.get('model');

    if (value === undefined) {
      // property being used as a getter
      return model.get('isCompleted');
    } else {
      // property being used as a setter
      model.set('isCompleted', value);
      model.save();
      return value;
    }
  }.property('model.isCompleted')
});

Any insight as to why the right content isn't displayed would be greatly appreciated.

EmptyArsenal EmptyArsenal · Accepted Answer · 2013-11-11T21:38:39

I just figured out the problem. content is a property all Ember controllers, so my variable name for the post content was creating some confusion when Ember was rendering the page. When I changed the variable name in my model and other places to post_content, content was rendering properly in the page.

// template
{{#each itemController="post"}}
    <li {{bind-attr class="isCompleted:completed"}}>
        {{input type="checkbox" checked=isCompleted class="toggle"}}
        <label>{{title}}</label>
        <p>{{post_content}}</p>
    </li>
{{/each}}

//model 
Posts.Post = DS.Model.extend({
    title: DS.attr('string'),
    post_content: DS.attr('string'),
    isCompleted: DS.attr('boolean')
});

And problem solved.

Content not showing properly in Ember view

1 Answers