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

5
votes

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?

1
ember.jshandlebars.js
You are looking for Computed Properties, @intuitivepixel' answer below explains how to create a basic CP, for more advanced usage check emberjs.com/guides/object-model/computed-properties – Bradley Priest
This might be a browser specific issue. stackoverflow.com/questions/18605866/… – Yagna

1 Answers

13
votes

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