title: Using set() on an array
body: <p>I have an EmberArray that caches all activities at the day level. Therefore if I've pulled activities from the server for 1st July it will be found in <code>activitiesByDay['2013-07-01']</code>. My problem is how to get() and set() these array items so that I can take advantage of Ember's Run Loop and data binding properties. </p>
  
  <p>Here's the full code:</p>
  
  <pre><code>module.exports = App.ActivitiesRoute = App.AuthenticatedRoute.extend({
      onDate: null,
      actionList: Ember.ArrayController.create(),
      activitiesByDate: Ember.Array,
      activitiesOnDate: function() {
          return this.get('activitiesByDate')[this.get('onDate')].content;
      }.property('activitiesByDate','onDate'),
      if (!this.get('activitiesByDate')[params.on_date]) {
          this.set('activities', this.store.find('activity', {on_date: params.on_date}));
          this.get('activitiesByDate')[params.on_date] =
              this.store.filter('activity',function(activity){        
                  var itemDate = new Date(activity.get('start_time'));
                  itemDate = moment(itemDate).format('YYYY-MM-DD');
                  return itemDate === params.on_date;
              });
      }
  </code></pre>
  
  <p>As you can see, the line item which says ...</p>
  
  <blockquote>
    <p>this.get('activitiesByDate')[params.on_date] =</p>
  </blockquote>
  
  <p>is a problem because I'm making changes without letting Ember know. The problem is I can't find a way to use Ember's <code>set()</code> on an array who's keys are dates of the format "YYYY-MM-DD". This key structure, I believe, requires me to use Javascript's bracket notation versus dot notation that Ember should handle. </p>
  
  <p>---- UPDATE ----</p>
  
  <p>I have updated the <code>ActivitiesRoute</code> a little so that the <code>activitiesByDate</code> is an object rather than an Ember.Array. I have also changed all setters/getters to the properties of this object to use Embers get/set()`</p>
  
  <pre><code>App.ActivitiesRoute = App.AuthenticatedRoute.extend({
      onDate: null,
      activitiesByDate: Ember.Object.create(),
      activitiesOnDate: function() {
          return this.get('activitiesByDate.' + this.get('onDate'));
      }.property('activitiesByDate'),
  
      model: function(params) {
          this.set('onDate', params.on_date);
          // check if the given date has activities already loaded and if not then load it
          // if it does then do NOT reload. In the case of wanting a refresh use the refreshDate() method
          if (!this.get('activitiesByDate')[params.on_date]) {
              console.log('getting activities for: ' + params.on_date);
              this.set('activities', this.store.find('activity', {on_date: params.on_date})); // go get the dates from Server
              this.set('activitiesByDate.' + [params.on_date], this.store.filter('activity',function(activity){       
                  var itemDate = new Date(activity.get('start_time'));
                  itemDate = moment(itemDate).format('YYYY-MM-DD');
                  return itemDate === params.on_date;
              }));
          }
  
          return true;
      },
      setupController: function(controller, model) {
          controller.set('activitiesByDate',this.get('activitiesByDate'));
      }
  </code></pre>
  
  <p>The <code>activitiesByDate</code> object seems to work fine. Here's an example of what it's state looks like after having gone to three separate dates:</p>
  
  <p><img src="https://i.stack.imgur.com/N6ccR.png" alt=" "></p>
  
  <p>Looking inside these objects I can see that they contain the right amount of activities so that part looks good. Unfortunately my computed property -- <code>activitiesOnDate</code> is not being updated outside of when I hit reload in the browser. </p>