Add `component:create` and `component:mount` events

src/dom_components/model/Component.js

@@ -170,6 +170,10 @@ const Component = Backbone.Model.extend(Styleable).extend(
         );
       });
       this.init();
+
+      if (em) {
+        em.trigger('component:create', this);
+      }
     },
 
     /**
@@ -868,14 +872,23 @@ const Component = Backbone.Model.extend(Styleable).extend(
     },
 
     /**
-     * Get the DOM element of the component. This works only of the
-     * component is already rendered
+     * Get the DOM element of the component.
+     * This works only if the component is already rendered
      * @return {HTMLElement}
      */
     getEl() {
       return this.view && this.view.el;
     },
 
+    /**
+     * Get the View of the component.
+     * This works only if the component is already rendered
+     * @return {ComponentView}
+     */
+    getView() {
+      return this.view;
+    },
+
     /**
      * Return script in string format, cleans 'function() {..' from scripts
      * if it's a function

src/dom_components/view/ComponentImageView.js

@@ -78,15 +78,14 @@ module.exports = ComponentView.extend({
   },
 
   render() {
-    this.updateAttributes();
-    this.updateClasses();
+    this.renderAttributes();
+    const { $el, model } = this;
+    const cls = $el.attr('class') || '';
+    !model.get('src') && $el.attr('class', `${cls} ${this.classEmpty}`.trim());
+    // Avoid strange behaviours with drag and drop
+    $el.attr('onmousedown', 'return false');
+    this.postRender();
 
-    var actCls = this.$el.attr('class') || '';
-    if (!this.model.get('src'))
-      this.$el.attr('class', (actCls + ' ' + this.classEmpty).trim());
-
-    // Avoid strange behaviours while try to drag
-    this.$el.attr('onmousedown', 'return false');
     return this;
   }
 });

src/dom_components/view/ComponentTableBodyView.js

@@ -1,4 +1 @@
-var Backbone = require('backbone');
-var ComponentView = require('./ComponentView');
-
-module.exports = ComponentView.extend({});
+module.exports = require('./ComponentView').extend({});

src/dom_components/view/ComponentTableCellView.js

@@ -1,4 +1 @@
-var Backbone = require('backbone');
-var ComponentView = require('./ComponentView');
-
-module.exports = ComponentView.extend({});
+module.exports = require('./ComponentView').extend({});

src/dom_components/view/ComponentTableFootView.js

@@ -1,4 +1 @@
-var Backbone = require('backbone');
-var ComponentView = require('./ComponentView');
-
-module.exports = ComponentView.extend({});
+module.exports = require('./ComponentView').extend({});

src/dom_components/view/ComponentTableHeadView.js

@@ -1,4 +1 @@
-var Backbone = require('backbone');
-var ComponentView = require('./ComponentView');
-
-module.exports = ComponentView.extend({});
+module.exports = require('./ComponentView').extend({});

src/dom_components/view/ComponentTableRowView.js

@@ -1,4 +1 @@
-var Backbone = require('backbone');
-var ComponentView = require('./ComponentView');
-
-module.exports = ComponentView.extend({});
+module.exports = require('./ComponentView').extend({});

src/dom_components/view/ComponentTableView.js

@@ -1,6 +1,3 @@
-var Backbone = require('backbone');
-var ComponentView = require('./ComponentView');
-
-module.exports = ComponentView.extend({
+module.exports = require('./ComponentView').extend({
   events: {}
 });

src/dom_components/view/ComponentView.js

@@ -17,9 +17,10 @@ module.exports = Backbone.View.extend({
   initialize(opt = {}) {
     const model = this.model;
     const config = opt.config || {};
+    const em = config.em;
     this.opts = opt;
     this.config = config;
-    this.em = config.em || '';
+    this.em = em || '';
     this.pfx = config.stylePrefix || '';
     this.ppfx = config.pStylePrefix || '';
     this.attr = model.get('attributes');
@@ -345,9 +346,16 @@ module.exports = Backbone.View.extend({
     this.renderAttributes();
     this.renderChildren();
     this.updateScript();
-    this.onRender();
+    this.postRender();
+
     return this;
   },
 
+  postRender() {
+    const { em, model } = this;
+    this.onRender();
+    em && em.trigger('component:mount', model);
+  },
+
   onRender() {}
 });