vendredi 8 mai 2015

How to reverse a model's output in ember?

I'm trying to reverse a model's output in ember. It was suggested (via IRC channel) that I use a computed property, but I am having a tough time figuring out how to do this.

I'm trying to do this in the controller. Any help would be appreciated, as I am pretty new to ember.

controllers/comments.js

export default Ember.Controller.extend({
    model: 'comment',
    reverse: function(){
        return this.get('model').toArray().reverse();
    }.property('model.@each')
});

comments.hbs

{{#each model as |item|}}
    <div class="each__comment">
        <div class="comment__image">
            <img src="{{ item.img_src }}">
        </div>

        <div class="comment__text">
            <h2 class="comment__author">{{item.full_name}}</h2>
            <h3 class="comment__title">{{item.title}}</h3>
            <p class="comment__description">{{item.description}}    </p>
            <p class="comment__date">{{ item.date_posted }}</p>
        </div>


    </div>
{{/each}}

routes/comments.js

export default Ember.Route.extend({
    model: function() {
        return this.store.find('comment');
    },

    actions: {
        createComment: function() {

            var title = this.controller.get('newComment');

            if (title && !title.trim()) {
                this.set('newComment', '');
            return;
            }

            var comment = this.store.createRecord('comment', {
                description: title
            });

            this.controller.set('newComment', '');
            // Save the new model
            comment.save();
        }
    }
    });

models/comment.js

var Comment = DS.Model.extend({
  img_src: DS.attr('string', {
    defaultValue: '/assets/images/user-img-4.png'
  }),
  full_name: DS.attr('string', {
    defaultValue: 'Nick Beattie'
  }),
  title: DS.attr('string', {
    defaultValue: 'Developer'
  }),
  description: DS.attr('string', {
    defaultValue: 'description duh'
  }),
  date_posted: DS.attr('string', {
    defaultValue: 'Tues Nov 17th'
  })
});


Comment.reopenClass({
  FIXTURES: [
    {
        "id": "1",
        "img_src": "/assets/images/user-img-1.png",
        "full_name": "Tony Jackson",
        "title": "Product Designer",
        "description": "Morbi at augue eu felis cursus feugiat. Pellentesque a dui ut magna tristique imperdiet. Donec nec rutrum purus. Quisque id nibh metus. Proin condimentum non ipsum at sagittis. Suspendisse potenti.",
        "date_posted": "Tues Apr 10th"
    },
    {
        "id": "2",
        "img_src": "/assets/images/user-img-2.png",
        "full_name": "Laura Malroy",
        "title": "Strategist",
        "description": "Proin egestas turpis nec orci vulputate accumsan. Nullam gravida ultricies feugiat. Praesent molestie pulvinar egestas.",
        "date_posted": "Sat May 14th"
    },
    {
        "id": "3",
        "img_src": "/assets/images/user-img-3.png",
        "full_name": "Nicole Emsley",
        "title": "Illustrator",
        "description": "Etiam sed cursus mi. Morbi neque elit, ullamcorper et justo ut, pharetra egestas metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi magna dolor, pretium eget convallis ac, faucibus quis elit. Pellentesque vehicula vestibulum ante in bibendum. Nam tristique nec mi sit amet semper.",
        "date_posted": "Mon Jun 9th"
    }
  ]
});

export default Comment;




Aucun commentaire:

Enregistrer un commentaire