Edit Question - KnowledgeHub

Title Body

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, EDIT This seems to be working here and my 'activities' computed function is definitely firing, but no re-ordering of the view... I also tried to use an observer, but the results are the same. App.ActivitiesView = Em.View.extend({ templateName: 'activities', classNames: ['activities rounded shadow'], homeBinding: 'App.user.home', activities: [], homeChanged: (function() { console.log("homeChanged()"); this.set('activi

Tags (comma-separated) Cancel