title: How to update variables that are inside a helper body in an Ember template
body: <p>Imagine a property <code>myNumber</code> in a controller that has a different random number every second. With this template you will see this change every second:</p>
  
  <pre><code>&lt;h4&gt;Random number&lt;/h4&gt;
  &lt;p&gt;{{myNumber}}&lt;/p&gt;
  </code></pre>
  
  <p>However, when the number is only referenced inside a helper (e.g. <code>#if</code> or <code>#each</code>), <strong>the number is not updated anymore.</strong> This will only show the initial value:</p>
  
  <pre><code>&lt;h4&gt;Random number&lt;/h4&gt;
  {{#if model}}
      &lt;p&gt;{{myNumber}}&lt;/p&gt;
  {{/if}}
  </code></pre>
  
  <p>(Note that <code>myNumber</code> has no relation to <code>model</code>. Just using some random truthy property.)</p>
  
  <p>Interestingly, when you add the reference to the property back to the root of the document, <strong>the previously static numbers will now also update:</strong></p>
  
  <pre><code>&lt;h4&gt;Random number&lt;/h4&gt;
  {{myNumber}} -- Without this reference, references below won't update.
  {{#if model}}
      &lt;p&gt;{{myNumber}}&lt;/p&gt;
  {{/if}}
  </code></pre>
  
  <h2>How can I have <code>myNumber</code> inside the helpers update, without showing the number in the root of my template?</h2>
  
  <p>I've tried adding the reference in html comments, but that doesn't work. I assume Ember doesn't draw elements that are not in the DOM:</p>
  
  <pre><code>&lt;h4&gt;Random number&lt;/h4&gt;
  &lt;!-- {{myNumber}} --&gt;
  {{#if model}}
      &lt;p&gt;{{myNumber}}&lt;/p&gt;
  {{/if}}
  </code></pre>
  
  <p>What does work is adding the value to the DOM, but hiding it. However, this is an ugly solution:</p>
  
  <pre><code>&lt;h4&gt;Random number&lt;/h4&gt;
  &lt;span style="display:none"&gt;
      {{myNumber}}
  &lt;/span&gt;
  {{#if model}}
      &lt;p&gt;{{myNumber}}&lt;/p&gt;
  {{/if}}
  </code></pre>