Ember view is not updating after re-ordering array used to create child views
I have an activities view that contains an array of activities. This array gets sorted sometimes based on a calculated property(distanced_from_home) that the user can update. When the array is sorted I want the child views to be re-rendered by according to the new order. Here is my Template and View:

*index.html*

      <script type="text/x-handlebars" data-template-name="activities">
        <h1>Activities</h1>
        {{#each activities}}
          {{view App.ActivityView activityBinding="this"}}
        {{/each}}
      </script>

*app.js*

      App.ActivitiesView = Em.View.extend({
        templateName: 'activities',
        activities: (function() {
          var list;
          list = App.activityController.activities;
          console.log("Activities View");
          console.log(list);
          return list;
        }).property('App.activityController.activities', 'App.activityController.activities.@each.distance_to_home').cacheable()
      });

When I cause the distance_to_home property to change, the console.log output shows the list array is properly sorted, but the children views are not re-rendered in the new order. If I leave this view and then comeback to it (it is rendered again) then the correct order is shown.

What should I do to get the view to update automatically?

Thanks,

Ember view is not updating after re-ordering array used to create child views
===

I have an activities view that contains an array of activities. This array gets sorted sometimes based on a calculated property(distanced_from_home) that the user can update. When the array is sorted I want the child views to be re-rendered by according to the new order. Here is my Template and View:

*index.html*

      <script type="text/x-handlebars" data-template-name="activities">
        <h1>Activities</h1>
        {{#each activities}}
          {{view App.ActivityView activityBinding="this"}}
        {{/each}}
      </script>

*app.js*

      App.ActivitiesView = Em.View.extend({
        templateName: 'activities',
        activities: (function() {
          var list;
          list = App.activityController.activities;
          console.log("Activities View");
          console.log(list);
          return list;
        }).property('App.activityController.activities', 'App.activityController.activities.@each.distance_to_home').cacheable()
      });

When I cause the distance_to_home property to change, the console.log output shows the list array is properly sorted, but the children views are not re-rendered in the new order. If I leave this view and then comeback to it (it is rendered again) then the correct order is shown.

What should I do to get the view to update automatically?

Thanks,
