Add new hook methods to Component, updated and removed

src/dom_components/model/Component.js

@@ -118,6 +118,24 @@ const Component = Backbone.Model.extend(Styleable).extend(
       toolbar: null
     },
 
+    /**
+     * Hook method, called once the model is created
+     */
+    init() {},
+
+    /**
+     * Hook method, called when the model has been updated (eg. updated some model's property)
+     * @param {String} property Property name, if triggered after some property update
+     * @param {*} value Property value, if triggered after some property update
+     * @param {*} previous Property previous value, if triggered after some property update
+     */
+    updated(property, value, previous) {},
+
+    /**
+     * Hook method, called once the model has been removed
+     */
+    removed() {},
+
     initialize(props = {}, opt = {}) {
       const em = opt.em;
 
@@ -170,10 +188,7 @@ const Component = Backbone.Model.extend(Styleable).extend(
         );
       });
       this.init();
-
+      em && em.trigger('component:create', this);
-      if (em) {
-        em.trigger('component:create', this);
-      }
     },
 
     /**
@@ -508,8 +523,6 @@ const Component = Backbone.Model.extend(Styleable).extend(
       return this;
     },
 
-    init() {},
-
     /**
      * Add new component children
      * @param  {Component|String} components Component to add
@@ -941,6 +954,13 @@ const Component = Backbone.Model.extend(Styleable).extend(
     emitUpdate(property, ...args) {
       const em = this.em;
       const event = 'component:update' + (property ? `:${property}` : '');
+      this.updated(
+        property,
+        property && this.get(property),
+        property && this.previous(property),
+        ...args
+      );
+      this.trigger(event, ...args);
       em && em.trigger(event, this, ...args);
     },
 

src/dom_components/view/ComponentsView.js

@@ -18,6 +18,8 @@ module.exports = Backbone.View.extend({
     view.remove.apply(view);
     const children = view.childrenView;
     children && children.stopListening();
+    removed.components().forEach(this.removeChildren.bind(this));
+    removed.removed();
     if (em) {
       removed.get('style-signature') &&
         em

src/editor/index.js

@@ -18,7 +18,7 @@
  * ```
  *
  * ### Components
- * * `component:create` - Component is created (only the model, is not yet mounted in the canvas)
+ * * `component:create` - Component is created (only the model, is not yet mounted in the canvas), called after the init() method
  * * `component:mount` - Component is monted to an element and rendered in canvas
  * * `component:add` - Triggered when a new component is added to the editor, the model is passed as an argument to the callback
  * * `component:remove` - Triggered when a component is removed, the model is passed as an argument to the callback