Ember template renders function as string - ember.js

Question

I'm new to ember and got a problem with a template.
My route
import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin, {
model: function(params) {
var pageNum = params.page || 1,
pageRows = 8;
return this.store.find('account', {
page: pageNum,
rows: pageRows
});
},
setupController: function(controller, model) {
controller.set('model', model);
controller.set('greeting', 'Hello World');
}
});
My Controller
import Ember from 'ember';
export default Ember.ArrayController.extend({
contentLength: function() {
// console.log(this);
// console.log('length: ' + this.get('content').length);
// return this.get('content').length;
return 'Test string';
},
actions: {}
});
Template
{{ greeting }}
{{ contentLength }}
The {{ greeting }} gets rendered correctly. But {{ contentLength }} gets rendered out as a string function..
Hello World function () { // console.log(this); // console.log('length: ' + this.get('content').length); // return this.get('content').length; return 'Test string'; }
Anyone who can help me solve this issue?
Thanks

Answer 1

You need to add .property() at the end of the contentLength function in order to display it in a template:
import Ember from 'ember';
export default Ember.ArrayController.extend({
contentLength: function() {
// console.log(this);
// console.log('length: ' + this.get('content').length);
// return this.get('content').length;
return 'Test string';
}.property(),
actions: {}
});
If you want the property to update whenever another property of your controller changes simply add it as a "parameter" of your property like this .property("thepropertytoobserve") and the length property of an arrayController is already aviable as {{length}} in the template.
Have a look at the doc for more details on computerd properties.

Answer 2

You can just use {{ length }} in your template as ArrayControllers already have that property.
The reason your contentLength function is not doing what you want is because it is not a computed property. You need to either use Ember.computed(function() { ..}) or append .property(...) to your contentLength function.
Eg:
contentLength: function() {
return this.get('content.length');
}.property('content.length')