Is it possible to loop over a computed Array in Emberjs?

Question

I'm trying to loop over a computed property array in handlebars. In this example, I can do it for an ordinary array, but not a computed array: http://jsfiddle.net/gh7Qr/

What should the right syntax be to loop over a computed property in handlebars?

Answer 1

Yes, it is possible. But you forgot to return your computed array and you have to add cacheable() to computed properties, which return an object and not a primitive. Otherwise you'll run into an infinite loop (see discussion https://github.com/emberjs/ember.js/issues/38) Also have a look at Gordon Hempton's excellent blog post about current Ember.js gotchas, among others regarding computed properties. However since commit 626d23f the issue with cacheable has been solved.

A corrected example of your code is here: http://jsfiddle.net/gh7Qr/4/

Handlebars:

<script type="text/x-handlebars" >
    {{#each App.games}}
        {{this}}
    {{/each}}
    {{#each App.gamesA}}
        {{this}}
    {{/each}}
</script>

JavaScript:

App = Ember.Application.create({
    games: [1, 2, 3],
    gamesA: Em.computed(function() {
        return this.get('games').map(function(game) {
            return game + 'a';
        })
    }).property('games').cacheable()
});​

​