Update aspect list checkmarks only after the stream was fetched

app/assets/javascripts/app/models/stream_aspects.js

@@ -21,7 +21,14 @@ app.models.StreamAspects = app.models.Stream.extend({
     var url = this.url();
     var ids = this.aspects_ids;
     this.deferred = this.items.fetch(this._fetchOpts({url : url, data : { 'a_ids': ids }}))
-      .done(_.bind(this.triggerFetchedEvents, this));
+      .done(_.bind(this.fetchDone, this));
+  },
+
+  fetchDone: function() {
+    this.triggerFetchedEvents();
+    if (app.aspects) {
+      app.aspects.trigger('aspectStreamFetched');
+    }
   }
 });
 // @license-end

app/assets/javascripts/app/views/aspect_view.js

@@ -14,7 +14,7 @@ app.views.Aspect = app.views.Base.extend({
   toggleAspect: function(evt) {
     if (evt) { evt.preventDefault(); };
     this.model.toggleSelected();
-    this.$el.find('.icons-check_yes_ok').toggleClass('selected');
+
     app.router.aspects_stream();
   },
 

app/assets/javascripts/app/views/aspects_list_view.js

@@ -12,6 +12,7 @@ app.views.AspectsList = app.views.Base.extend({
   initialize: function() {
     this.collection.on('change', this.toggleSelector, this);
     this.collection.on('change', this.updateStreamTitle, this);
+    this.collection.on('aspectStreamFetched', this.updateAspectList, this);
   },
 
   postRenderTemplate: function() {
@@ -30,17 +31,10 @@ app.views.AspectsList = app.views.Base.extend({
   toggleAll: function(evt) {
     if (evt) { evt.preventDefault(); };
 
-    var aspects = this.$('li:not(:last)')
     if (this.collection.allSelected()) {
       this.collection.deselectAll();
-      aspects.each(function(i){
-        $(this).find('.icons-check_yes_ok').removeClass('selected');
-      });
     } else {
       this.collection.selectAll();
-      aspects.each(function(i){
-        $(this).find('.icons-check_yes_ok').addClass('selected');
-      });
     }
 
     this.toggleSelector();
@@ -60,6 +54,17 @@ app.views.AspectsList = app.views.Base.extend({
     $('.stream_title').text(this.collection.toSentence());
   },
 
+  updateAspectList: function() {
+    this.collection.each(function(aspect) {
+      var element = this.$("li[data-aspect_id="+aspect.get('id')+"]");
+      if (aspect.get('selected')) {
+        element.find('.icons-check_yes_ok').addClass('selected');
+      } else {
+        element.find('.icons-check_yes_ok').removeClass('selected');
+      }
+    });
+  },
+
   hideAspectsList: function() {
     this.$el.empty();
   },

features/step_definitions/aspects_steps.rb

@@ -91,14 +91,14 @@ end
 Then /^I should see "([^"]*)" aspect selected$/ do |aspect_name|
   aspect = @me.aspects.where(:name => aspect_name).first
   within("#aspects_list") do
-    page.should have_css "li[data-aspect_id='#{aspect.id}'] .selected"
+    current_scope.should have_css "li[data-aspect_id='#{aspect.id}'] .selected"
   end
 end
 
 Then /^I should see "([^"]*)" aspect unselected$/ do |aspect_name|
   aspect = @me.aspects.where(:name => aspect_name).first
   within("#aspects_list") do
-    page.should have_no_css "li[data-aspect_id='#{aspect.id}'] .selected"
+    current_scope.should have_no_css "li[data-aspect_id='#{aspect.id}'] .selected"
   end
 end
 

spec/javascripts/app/views/aspect_view_spec.js

@@ -28,7 +28,6 @@ describe("app.views.Aspect", function(){
       it('it should deselect the aspect', function(){
         this.view.$el.children('a.selectable').trigger('click');
         expect(this.view.toggleAspect).toHaveBeenCalled();
-        expect(this.view.$el.children('.icons-check_yes_ok').hasClass('selected')).toBeFalsy();
         expect(app.router.aspects_stream).toHaveBeenCalled();
       });
 

spec/javascripts/app/views/aspects_list_view_spec.js

@@ -48,7 +48,6 @@ describe("app.views.AspectsList", function(){
 
         it('should show all the aspects selected', function(){
           expect(this.view.toggleAll).toHaveBeenCalled();
-          expect(this.view.$('.selected').length).toBe(3);
         });
 
         it('should show \'Deselect all\' link', function(){