current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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!

share|improve this question

2 Answers 2

up vote 2 down vote accepted

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/

share|improve this answer
1  
This is closer to what I was looking for, and seems like an all over more elegant solution. Thanks! –  SlEePlEs5 Oct 29 '13 at 16:06
up vote 1 down vote

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.

share|improve this answer
    
Worked perfectly, thanks! –  SlEePlEs5 Oct 29 '13 at 15:39
    
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. –  Karl-Johan Sjögren Oct 29 '13 at 15:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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