Update listening of components

src/dom_components/model/Component.js

@@ -162,7 +162,6 @@ 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 => {
@@ -450,12 +449,19 @@ const Component = Backbone.Model.extend(Styleable).extend(
     },
 
     initComponents() {
+      const event = 'change:components';
+      const toListen = [this, event, this.initComponents];
+      this.stopListening(...toListen);
       // Have to add components after the init, otherwise the parent
       // is not visible
       const comps = new Components(null, this.opt);
       comps.parent = this;
-      !this.opt.avoidChildren && comps.reset(this.get('components'));
+      const components = this.get('components');
+      const addChild = !this.opt.avoidChildren;
+      addChild && comps.reset();
       this.set('components', comps);
+      addChild && comps.add(components);
+      this.listenTo(...toListen);
       return this;
     },
 

src/dom_components/model/Components.js

@@ -1,4 +1,4 @@
-import { isEmpty } from 'underscore';
+import { isEmpty, isArray, isString } from 'underscore';
 
 const Backbone = require('backbone');
 
@@ -32,19 +32,31 @@ module.exports = Backbone.Collection.extend({
     };
   },
 
-  add(models, opt = {}) {
-    if (typeof models === 'string') {
-      const cssc = this.em.get('CssComposer');
-      const parsed = this.em.get('Parser').parseHtml(models);
-      models = parsed.html;
+  parseString(value, opt = {}) {
+    const { em } = this;
+    const cssc = em.get('CssComposer');
+    const parsed = em.get('Parser').parseHtml(value);
 
-      if (parsed.css && cssc) {
-        const { avoidUpdateStyle } = opt;
-        const added = cssc.addCollection(parsed.css, {
-          extend: 1,
-          avoidUpdateStyle
-        });
-      }
+    if (parsed.css && cssc) {
+      const { avoidUpdateStyle } = opt;
+      cssc.addCollection(parsed.css, {
+        extend: 1,
+        avoidUpdateStyle
+      });
+    }
+
+    return parsed.html;
+  },
+
+  add(models, opt = {}) {
+    if (isString(models)) {
+      models = this.parseString(models, opt);
+    } else if (isArray(models)) {
+      models.forEach((item, index) => {
+        if (isString(item)) {
+          models[index] = this.parseString(item);
+        }
+      });
     }
 
     return Backbone.Collection.prototype.add.apply(this, [models, opt]);

src/dom_components/view/ComponentView.js

@@ -1,6 +1,7 @@
 import Backbone from 'backbone';
 import { isArray, isEmpty } from 'underscore';
 
+const Components = require('../model/Components');
 const ComponentsView = require('./ComponentsView');
 const Selectors = require('selector_manager/model/Selectors');
 
@@ -36,10 +37,10 @@ module.exports = Backbone.View.extend({
     this.listenTo(model, 'active', this.onActive);
     //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();
     this.initClasses();
+    this.initComponents({ avoidRender: 1 });
     this.init();
   },
 
@@ -66,6 +67,19 @@ module.exports = Backbone.View.extend({
     }
   },
 
+  initComponents(opts = {}) {
+    const { model, $el } = this;
+    const event = 'change:components';
+    const components = model.get('components');
+
+    if (components instanceof Components) {
+      $el.data('collection', components);
+      this.stopListening(model, event, this.initComponents);
+      this.listenTo(model, event, this.initComponents);
+      !opts.avoidRender && this.renderChildren();
+    }
+  },
+
   /**
    * Handle any property change
    * @private
@@ -315,6 +329,7 @@ module.exports = Backbone.View.extend({
    * @private
    */
   renderChildren() {
+    this.updateContent();
     const container = this.getChildrenContainer();
     const view = new ComponentsView({
       collection: this.model.get('components'),
@@ -338,7 +353,6 @@ module.exports = Backbone.View.extend({
 
   render() {
     this.renderAttributes();
-    this.updateContent();
     this.renderChildren();
     this.updateScript();
     this.onRender();