Display age in select - ember.js

Question

I'm new with ember. I try to display a simple select box that contains age value.
This is my controler :
App.HomeController = Ember.ObjectController.extend({
ages : function() {
var ages = [];
for(var i = 18; i <= 99; i++) {
ages.push(i);
}
return ages;
}
});
This is my view :
<div class="container" id="main">
<div class="row">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name : </label>
<div class="col-xs-10">
{{input type="text" name="name" value=firstname autofocus="true"}}
</div>
</div>
<div class="form-group">
<label for="age" class="col-xs-2 control-label">Age : </label>
<div class="col-xs-10">
{{view "select" content=ages}}
</div>
</div>
</form>
</div>
i get this error when i refresh browser :
Error: Assertion Failed: The value that #each loops over must be an Array. You passed function () {
var ages = [];
for(var i = 18; i <= 99; i++) {
ages.push(i);
}
return ages;
}
Anyone can tell me how i can do that?

Answer 1

Your ages function resolved by handlebars. If you want to use it as a property add this to your function so you can use it in handlebars and also I would recommend you to use Ember.A() instead of javascript array.
ages : function() {
var ages = Ember.A();
for(var i = 18; i <= 99; i++) {
ages.pushObject(i);
}
return ages;
}.property()
Not tested code by the way