diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index 508d7d453..39bd3c8a0 100644 --- a/src/dom_components/model/Component.js +++ b/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(); - - if (em) { - em.trigger('component:create', this); - } + 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); }, diff --git a/src/dom_components/view/ComponentsView.js b/src/dom_components/view/ComponentsView.js index e1d3e0626..5a7fa0baa 100644 --- a/src/dom_components/view/ComponentsView.js +++ b/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 diff --git a/src/editor/index.js b/src/editor/index.js index fcd42945d..22aff78a6 100644 --- a/src/editor/index.js +++ b/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