title: Rerender view in emberjs
body: <p>I have an array object in View  with binding from Controller. When I change the array in controller, the array in view change properly. But my template for view that seems to be broken: <a href="http://jsfiddle.net/secretlm/2C4c4/84/" rel="nofollow">http://jsfiddle.net/secretlm/2C4c4/84/</a></p>
  
  <p>When I try to use rerender method in view. My template isn't broken. This fiddle works well: <a href="http://jsfiddle.net/secretlm/2C4c4/85/" rel="nofollow">http://jsfiddle.net/secretlm/2C4c4/85/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;script type="text/x-handlebars" data-template-name="test"&gt;
          &lt;button {{action "changeContent" target="App.latController"}}&gt; Change&lt;/button&gt;
      {{#each element in view.content}}
   &lt;!-- if openTag is true, &lt;ol&gt; tag is created --&gt;       
         {{#if element.openTag}}
            &lt;ol&gt;                                    
          {{/if}}
               &lt;li&gt;{{element.teo.item.Name}}&lt;/li&gt;
   &lt;!-- if closeTag is true, &lt;/ol&gt; tag is created --&gt;
          {{#if element.closeTag}}
            &lt;/ol&gt;                   
          {{/if}}
      {{/each}}
     &lt;/script&gt;​
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>App = Ember.Application.create({});
  
  App.LatView = Ember.View.extend({
      templateName: "test",
      contentBinding: "App.latController.contentWithIndices",
      onRerender: function() {
          this.rerender();
          console.log(this.get('content'));
      }.observes('content')
  
  });
  
  App.latController = Ember.Object.create({
      changeContent: function() {
          this.set('model', []);
          var model = this.get('model');
  
          var obj1 = {
              item: {
                  "DisplayOrder": 1,
                  "Public": true,
                  "Description": "The test1",
                  "Name": "The name1"
              }
          };
          var obj2 = {
              item: {
                  "DisplayOrder": 1,
                  "Public": true,
                  "Description": "The test2",
                  "Name": "The name2"
              }
          }
          var obj3 = {
              item: {
                  "DisplayOrder": 1,
                  "Public": true,
                  "Description": "The test3",
                  "Name": "The name3"
              }
          }
          var obj4 = {
              item: {
                  "DisplayOrder": 1,
                  "Public": true,
                  "Description": "The test4",
                  "Name": "The name4"
              }
          }
          var obj5 = {
              item: {
                  "DisplayOrder": 1,
                  "Public": true,
                  "Description": "The test5",
                  "Name": "The name5"
              }
          }
          model.pushObject(obj1);
          model.pushObject(obj2);
          model.pushObject(obj3);
          model.pushObject(obj4);
          model.pushObject(obj5);
  
      },
  
  
  
      model: [
          {
             item: {
              "DisplayOrder": 1,
              "Public": true,
              "Description": "The test1",
              "Name": "The name1"
            }
         }
          ,
      {
          item: {
              "DisplayOrder": 1,
              "Public": true,
              "Description": "The test2",
              "Name": "The name2"
          }
      }
          ,
      {
          item: {
              "DisplayOrder": 1,
              "Public": true,
              "Description": "The test3",
              "Name": "The name3"
          }
      },
      {
  
          item: {
              "DisplayOrder": 1,
              "Public": true,
              "Description": "The test4",
              "Name": "The name4"
          }
      },
      {
  
          item: {
              "DisplayOrder": 1,
              "Public": true,
              "Description": "The test5",
              "Name": "The name5"
          }
      } ],
  
              contentWithIndices: function() {
                  var length = this.get('model').length;
                  return this.get('model').map(function(i, idx) {
                      return {
                          teo: i,
                          openTag: (idx % 4 == 0),
                          closeTag: ((idx % 4 == 3) || (idx == length - 1))
                      };
                  });
              }.property('model.@each')
  
          });
  
          var view = App.LatView.create({});
          view.append();
  </code></pre>
  
  <p>When should we use rerender method manually? Is there any way to do that without re-rendering my view?  Any idea is welcomed, thanks in advance.</p>