title: How can I store an array in Ember Data & update each array item in the template?
body: <p>I have a Todo-App and now I want to add a list of checkboxes after each task. </p>
  
  <p>When I click a checkbox the correct array item is changed but it's not updated in the template. Furthermore the checkboxes are always filled, even though the value when created is set to false.</p>
  
  <p>I created an array attribute in the DS.Model with DS.Transform for that. </p>
  
  <pre><code>Todos.Todo = DS.Model.extend({
      title: DS.attr('string'),
      quarters: DS.attr('array')
  });
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>{{#each item in quarters}}
      &lt;input type="checkbox" checked=item {{action "checkIndex" _view.contentIndex on="click"}}&gt;
  {{/each}}
  </code></pre>
  
  <p>_</p>
  
  <pre><code>Todos.TodoController = Ember.ObjectController.extend({
      actions: {
          checkIndex: function (index) {
              var quarters = this.get('model.quarters');
              var value = quarters[index];
  
              value = value ? false : true;
              var strIndex = '' + index;
              quarters.set(strIndex, value);
  
              console.log(this.get('model.quarters')[index]); // --&gt; returns updated value
  
              this.get('model').save();
          }
          ....
  </code></pre>
  
  <p>It seems like I cannot iterate over the array attribute and render each item seperatly while keeping them updated. I searched a lot for solutions but still didn't figure it out. Or is there a better way to do this?</p>
  
  <p>Iterating over array --> item gets not updated in template:</p>
  
  <pre><code>{{#each item in quarters}}
      {{item}}
  {{/each}}
  </code></pre>
  
  <p>Array --> get's updated in template:</p>
  
  <pre><code>{{quarters}}
  </code></pre>
  
  <p>JsFiddle: <a href="http://jsfiddle.net/Ld7gf/5/" rel="nofollow">http://jsfiddle.net/Ld7gf/5/</a></p>