As you'll see in the answer to this SO question it is possible to loop with {{#each}} in a component template over the return value of a component function that is an array. For convience sake, I copy that code here at the very bottom.
I tried to do something similar. In my template, I use a component and pass it an object with key values
{{'my-comp' kvobject=mykvobject}}
In components/my-comp.js, I create a function that returns an array
keyvalues: function(){
var emberobj = this.get('kvobject');
//note the object I'm interested in is wrapped in some emberarray or object that is at emberobj[0];
var arr = [];
for (var key in emberobj[0]){
if(emberobj[0].hasOwnProperty(key)){
var pair = key + ' : ' + emberobj[0][key];
arr.push(pair)
}
}
return arr;
}
In my component template templates/components/my-comp, I do
{{#each pair in keyvalues}}
{{yield}}
{{/each}}
But this throws an array, saying the value that #each loops over must be an Array. You passed function keyvalues().
Question: why can't I loop over the array returned from the function as a type of computed property? Below, is the code from the linked-to answer that I modeled my code after.
App.IncrementForComponent = Ember.Component.extend({
numOfTimes: function(){
var times = this.get('times');
return new Array(parseInt(times));
}.property('times')
});
Component template:
<script type="text/x-handlebars" id="components/increment-for">
{{#each time in numOfTimes}}
{{ yield }}
{{/each}}
</script>
Component usage:
{{#increment-for times=2 }}
<div>How goes it?</div>
{{/increment-for}}
