Getting an Ember controller's function property from inside an Ember Handlebars template

Question

In an Ember Handlebars template, it is possible to access a controller's (string/boolean/number based) property by using the

• {{someProperty}}
• <someHtmlTag {{bindAttr someHtmlTagAttribute="someProperty" />

constructs.

This doesn't seem to work for function-based controller properties.

Example

The following works

//Handlebars
<script type="text/x-handlebars" id="index">
    Some property: {{someProperty}}<br/>
</script>   

//Javascript
App.IndexController = Ember.ObjectController.extend({
    someProperty: "yolo",
});

The following doesn't work

//Handlebars
<script type="text/x-handlebars" id="index">
    Some property: {{someProperty}}<br/>
</script>   

//Javascript
App.IndexController = Ember.ObjectController.extend({
    someProperty: function() {
        return "yolo"; },
});

Here is a jsFiddle

---

Using the {{bindAttr ...}} gives a little insight into the problem:

Uncaught Error: assertion failed: Attributes must be numbers, strings or booleans, not function ()  ...{

How can I access function-based Ember controller properties from within a Handlebars template?

Answer 1

If you just need a function to be executed when the property is accessed, then you could do something like:

//Javascript
App.IndexController = Ember.ObjectController.extend({
    someProperty: function() {
        // do your stuff...
        return "yolo";
    }.property()
});

Working fiddle

Hope it helps