How do I get a property in a template to auto update when a JS variable changes?

Question

I have a template with the {{price}} property inside of it that I would like to auto-update with the current value of the JS variable "total_price". I'm trying to follow the basic concepts outlined here: http://emberjs.com/guides/getting-started/displaying-the-number-of-incomplete-todos/

Here is my code:

TEMPLATE:

<script type="text/x-handlebars" data-template-name='question'>
     <div id="current-price">
         {{price}}
     </div>
 </script>

CONTROLLER:

App.QuestionController = Ember.ObjectController.extend({
    price: function() {
         return total_price;
    }
});

Why isn't {{price}} updating with the current value of "total_price"?

Answer 1

You need to declare price as a computed property, which depends on total_price and re-executes whenever total_price changes. Not really sure where your total_price variable lives, but assuming it's defined on the same controller then you could do something like this:

App.QuestionController = Ember.ObjectController.extend({
  total_price: null,
  price: function() {
    return this.get('total_price');
  }.property('total_price')
});

Hope it helps.