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?
1 Answer
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()
});
1 Comment
Chih-Chao Lam
Thanks! I was translating from coffeescript, and forgot the return. The cacheable was what got me