0

I've tried following this post with little success.

I have a sample Ember.js application and am attempting to sort the "blog posts" where the newest post is listed first. Where am I going wrong?

index.html

<script type="text/x-handlebars" data-template-name="posts">

    ...

    <!-- relevant section -->
    <section id="posts" class="col-md-12">
        {{#each post in model}}
            <div class="post row">
                <h3 class="title">{{post.title}}</h3>
                <div class="body">{{post.body}}</div>
            </div>
        {{/each}}
    </section>
</script>

router.js

Blog.Router.map(function() {
    this.resource('posts', {path: '/'});
});

Blog.PostsRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('post');
    }
});

posts_controller.js

Blog.PostsController = Ember.ArrayController.extend({
    itemController: 'post',
    sortProperties: ['id'],
    sortAscending: false,
    actions: {
        createPost: function() {
            var title = this.get('newTitle');
            var body = this.get('newBody');
            if(!title.trim() || !body.trim()) { return; }

            var post = this.store.createRecord('post', {
                title: title,
                body: body
            });

            this.set('newTitle', '');
            this.set('newBody', '');

            post.save();
        }
    }
});

post.js

Blog.Post = DS.Model.extend({
    title: DS.attr('string'),
    body: DS.attr('string')
});
Blog.Post.FIXTURES = [
    {
        id: 1,
        title: 'Hell Is Other Robots',
        body: 'You know the worst thing about being a slave? They make you work, but they don\'t pay you or let you go. Kif, I have mated with a woman. Inform the men. Now, now. Perfectly symmetrical violence never solved anything.'
    },
    {
        id: 2,
        title: 'The Luck of the Fryrish',
        body: 'Tell them I hate them. There\'s no part of that sentence I didn\'t like! Fetal stemcells, aren\'t those controversial? Daylight and everything. That\'s not soon enough! You\'re going to do his laundry? Oh right. I forgot about the battle. Hey, whatcha watching?'
    },
    {
        id: 3,
        title: 'The Duh-Vinci Code',
        body: 'I\'ve been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Actually, that\'s still true. You seem malnourished. Are you suffering from intestinal parasites? And remember, don\'t do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don\'t not do it! Oh, I always feared he might run off like this. Why, why, why didn\'t I break his legs?'
    }
];

1 Answer 1

2

You simply need to bind to the arrangedContent property instead of the model directly.

{{#each post in arrangedContent}}
    <div class="post row">
        <h3 class="title">{{post.title}}</h3>
        <div class="body">{{post.body}}</div>
    </div>
{{/each}}

Please see the documentation for arrangedContent here. Dom Cristie has written a nice overview here.

2
  • That did it. Do you happen to have a link to the documentation that mentions arrangedContent? I didn't even know that was a think.
    – drewwyatt
    Feb 11, 2015 at 2:54
  • 1
    It is preferable to use {{#each post in controller}}. That way your posts will be wrapped in the post item controller Feb 18, 2015 at 13:35

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.