Update listening of classes in Components

src/dom_components/index.js

@@ -328,15 +328,13 @@ module.exports = () => {
 
       if ((result && result.length) || isObj) {
         this.clear();
-        this.getComponents().reset();
 
         // If the result is an object I consider it the wrapper
         if (isObj) {
-          this.getWrapper()
-            .set(result)
-            .initComponents()
-            .initClasses()
-            .loadTraits();
+          this.getWrapper().set(result);
+          // .initClasses()
+          // .loadTraits()
+          // .initComponents();
         } else {
           this.getComponents().add(result);
         }

src/dom_components/model/Component.js

@@ -162,6 +162,7 @@ const Component = Backbone.Model.extend(Styleable).extend(
       this.initComponents();
       this.initToolbar();
       this.set('status', '');
+      //this.listenTo(this, 'change:components', this.initComponents);
 
       // Register global updates for collection properties
       ['classes', 'traits', 'components'].forEach(name => {
@@ -437,8 +438,14 @@ const Component = Backbone.Model.extend(Styleable).extend(
     },
 
     initClasses() {
+      const event = 'change:classes';
+      const toListen = [this, event, this.initClasses];
+      this.stopListening(...toListen);
       const classes = this.normalizeClasses(this.get('classes') || []);
-      this.set('classes', new Selectors(classes));
+      const selectors = new Selectors([]);
+      this.set('classes', selectors);
+      selectors.add(classes);
+      this.listenTo(...toListen);
       return this;
     },
 

src/dom_components/view/ComponentView.js

@@ -2,6 +2,7 @@ import Backbone from 'backbone';
 import { isArray, isEmpty } from 'underscore';
 
 const ComponentsView = require('./ComponentsView');
+const Selectors = require('selector_manager/model/Selectors');
 
 module.exports = Backbone.View.extend({
   className() {
@@ -23,7 +24,7 @@ module.exports = Backbone.View.extend({
     this.attr = model.get('attributes');
     this.classe = this.attr.class || [];
     const $el = this.$el;
-    const classes = model.get('classes');
+    //const classes = model.get('classes');
     this.listenTo(model, 'change:style', this.updateStyle);
     this.listenTo(model, 'change:attributes', this.updateAttributes);
     this.listenTo(model, 'change:highlightable', this.updateHighlight);
@@ -33,11 +34,12 @@ module.exports = Backbone.View.extend({
     this.listenTo(model, 'change:content', this.updateContent);
     this.listenTo(model, 'change', this.handleChange);
     this.listenTo(model, 'active', this.onActive);
-    this.listenTo(classes, 'add remove change', this.updateClasses);
+    //this.listenTo(classes, 'add remove change', this.updateClasses);
     $el.data('model', model);
     $el.data('collection', model.get('components'));
     model.view = this;
-    classes.length && this.importClasses();
+    //classes.length && this.importClasses();
+    this.initClasses();
     this.init();
   },
 
@@ -51,6 +53,19 @@ module.exports = Backbone.View.extend({
    */
   onActive() {},
 
+  initClasses() {
+    const { model } = this;
+    const event = 'change:classes';
+    const classes = model.get('classes');
+
+    if (classes instanceof Selectors) {
+      this.stopListening(model, event, this.initClasses);
+      this.listenTo(model, event, this.initClasses);
+      this.listenTo(classes, 'add remove change', this.updateClasses);
+      classes.length && this.importClasses();
+    }
+  },
+
   /**
    * Handle any property change
    * @private

src/selector_manager/view/ClassTagsView.js

@@ -57,7 +57,11 @@ module.exports = Backbone.View.extend({
       'styleManager:update',
       this.componentChanged
     );
-    this.listenTo(this.target, 'component:toggled', this.componentChanged);
+    this.listenTo(
+      this.target,
+      'component:toggled component:update:classes',
+      this.componentChanged
+    );
     this.listenTo(this.target, 'component:update:classes', this.updateSelector);
 
     this.listenTo(this.collection, 'add', this.addNew);