Ember.js: Computed property on current element in array

Question

So, this is what my model looks like (represented by fixture data):

var posts = [{
    id: 'b026324c6904b2a9',
    title: "My new front door",
    author: { name: "Matthieu" },
    date: new Date('2013-10-28T12:19:30.789'),
    status: 'new',
    hidden_message: "hidden1"
}, {
    id: '26ab0db90d72e28a',
    title: "Best pizza in town",
    author: { name: "Harry" },
    date: new Date('2013-10-28T12:19:30.789'),
    status: '',
    hidden_message: "hidden2"
}, {
    id: '6d7fce9fee471194',
    title: "Skateboard dreamland",
    author: { name: "Matthieu" },
    date: new Date('2013-10-28T12:19:30.789'),
    status: 'solved',
    hidden_message: "hidden3"
}, {
    id: '48a24b70a0b37653',
    title: "my house looks like a pumpkin",
    author: { name: "Harry" },
    date: new Date('2013-10-28T12:19:30.789'),
    status: '',
    hidden_message: "hidden4"
}];

My route:

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return posts;
    }
});

And, I'd like to be able to display a certain piece of HTML in the template if the corresponding post is new, a different one if it's solved, and nothing if the status is blank. It seems to me as if the best way to do this is using an {{#if}} helper, but that doesn't do equality comparisons, it can only take a boolean variable. So, I'd like to do something like this:

App.IndexController = Ember.ArrayController.extend({

    isNew: function(val) {

        if(this.get('currentitem.status') === 'new') {
            return true;
        }

        return false;

    }.property('isNew')

});

But I can't find out how to select the item being currently accessed by {{#each}} in the template. Is this even possible, and if yes, how do I do it (or something similar)?

Thanks all!

Karl-Johan Sjögren · Accepted Answer · 2013-10-29 15:40:18Z

3

The correct way to do this is to create an itemcontroller that helps you by providing a controller per item in your collection.

App.IndexController = Ember.ArrayController.extend({
    itemController: "PostItem",
});

App.PostItemController = Ember.ObjectController.extend({
    isNew: function() {
        if(this.get('status') === 'new') {
            return true;
        }
        return false;
    }.property('status')
});

Then in your handlebar template you can just call {{isNew}} in the {{#each}}-context.

I've put up a working fiddle that you can test it out in.

http://jsfiddle.net/LordDaimos/v8NR3/1/

answered Oct 29, 2013 at 15:40

Karl-Johan Sjögren

17.8k7 gold badges66 silver badges75 bronze badges

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

1 Comment

SlEePlEs5 Over a year ago

This is closer to what I was looking for, and seems like an all over more elegant solution. Thanks!

Meori Oransky · Accepted Answer · 2013-10-29 15:20:57Z

1

Best way would probably be to wrap each post in an object that has the isNew method, like this:

var postObject = Ember.Object.extend({
    isNew: function() {

        if(this.get('status') === 'new') {
            return true;
        }

        return false;

    }.property('status')
});

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return posts.map(function(post){
            return postObject.create(post);
        });
    }
});

this way you could query on each post.

answered Oct 29, 2013 at 15:20

Meori Oransky

6884 silver badges8 bronze badges

1 Comment

Karl-Johan Sjögren Over a year ago

A note though, this way he will create new objects from his earlier ones so if he updates the new objects they won't reflect back to his original ones (which might be used in other places as well.

Collectives™ on Stack Overflow

Ember.js: Computed property on current element in array

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related