title: Bind handlebars to application object in ember.js
body: <p>Q: How do I bind handlebars to an application object variable, such that when that variable updates, the handlebar data on the screen updates also?</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/kQuVG/3/" rel="nofollow">http://jsfiddle.net/kQuVG/3/</a></p>
  
  <p><strong>Handlebars</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script type="text/x-handlebars"&gt;
      {{App.Player.stats.basic}} Scrap
  &lt;/script&gt;
  &lt;button&gt;Add Scrap&lt;/button&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>App.Player = Em.Object.create({
      stats:{
          basic: 10,
          premium: 20
      }
  });    
  
  $('button').click(function(){
      console.log(App.Player.stats.basic);
      App.Player.stats.basic += 10;
      console.log(App.Player.stats.basic);
  });
  </code></pre>
  
  <p>The fiddle isn't even working, what I'd like to do is to click the button and add 10 onto the App.Player.stats.scrap value, and have that reflected in the output pane. Is this even the right way to be doing this?</p>
  
  <p>Thanks in advance.</p>
  
  <p>G</p>