CODEWITHSUNDEEP
javascriptember.js
SlEePlEs5
SlEePlEs5

Reputation: 75

Ember.js: Computed property on current element in array

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!

Upvotes: 2

Views: 599

Answers (2)

Karl-Johan Sjögren
Karl-Johan Sjögren

Reputation: 17612

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/

Upvotes: 3

Meori Oransky
Meori Oransky

Reputation: 688

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.

Upvotes: 1

Related Questions