title: In Ember.js why does binding to an array not work outside of {{#each}}?
body: <p>In the code below, I render 3 views. The second and third views render <code>App.controller.a</code>. Clicking the first view changes <code>App.controller.a</code>. As you click, the third view updates its content. The second view does not update its content. Why?</p>
  
  <p>I presumed that the second view binds to the array <code>App.controller.a</code>. It looks like the binding is not updating.</p>
  
  <p>Demo: <a href="http://jsfiddle.net/kcmH4/" rel="nofollow">http://jsfiddle.net/kcmH4/</a></p>
  
  <p>The code:</p>
  
  <pre><code>App = Ember.Application.create({});
  App.controller = Ember.Object.create({
      a: Ember.A([1]),
      my_method: function() {
          var a = this.get('a');
          $.each([2], function(i, element) {
              a.pushObject(element);
          });
      }
  });
  App.MyView = Ember.View.extend({
      click: function() {
          this.get('content').my_method();
      }
  });
  </code></pre>
  
  <p>The template:</p>
  
  <pre><code>{{#view App.MyView contentBinding="App.controller"}}
      First view: Click me
  {{/view}}
  {{#view Ember.View contentBinding="App.controller"}}
      2nd view: {{content.a}}
  {{/view}}
  {{#view Ember.View contentBinding="App.controller"}}
      Third view:
      &lt;ul&gt;
      {{#each content.a}}
          &lt;li&gt;{{this}}&lt;/li&gt;
      {{/each}}
      &lt;/ul&gt;
  {{/view}}
  </code></pre>