From f973fd4c8695d1d9be489445437da2be438f2ba1 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 29 Aug 2019 20:05:40 +0200
Subject: [PATCH] Update new components docs

---
 docs/modules/Components-new.md           | 22 +++++++++++++++++-----
 src/dom_components/view/ComponentView.js | 11 +++++++++++
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/docs/modules/Components-new.md b/docs/modules/Components-new.md
index 0d4504358..5cdd0cf87 100644
--- a/docs/modules/Components-new.md
+++ b/docs/modules/Components-new.md
@@ -493,6 +493,9 @@ editor.DomComponents.addType('my-input-type', {
     // ...
   },
   view: {
+    // Be default, the tag of the element is the same of the model
+    tagName: 'div',
+
     // Add easily component specific listeners with `events`
     // Being component specific (eg. you can't attach here listeners to window)
     // you don't need to care about removing them when the component is removed,
@@ -515,7 +518,18 @@ editor.DomComponents.addType('my-input-type', {
     // On init you can create listeners, like in the model, or start some other
     // function at the beginning
     init({ model }) {
-      this.on('');
+      // Do something in view on model property change
+      this.listenTo(model, 'change:prop', this.handlePropChange);
+
+      // If you attach listeners on outside objects remember to unbind
+      // them in `removed` function in order to avoid memory leaks
+      this.onDocClick = this.onDocClick.bind(this);
+      document.addEventListener('click', this.onDocClick)
+    },
+
+    // Callback triggered when the element is removed from the canvas
+    removed() {
+      document.removeEventListener('click', this.onDocClick)
     },
 
     // Do something with the content once the element is rendered.
@@ -535,7 +549,8 @@ editor.DomComponents.addType('my-input-type', {
         someDataFromModel: model.get('someData'),
       });
       // Rememebr that this changes exist only inside the editor canvas
-      // None of the DOM change is stored in your template data
+      // None of the DOM change is stored in your template data,
+      // if you need to store something, use the model properties
       el.appendChild(asyncContent);
     }
   },
@@ -543,9 +558,6 @@ editor.DomComponents.addType('my-input-type', {
 ```
 
 
-* Show how to customize HTML
-
-
 --- OLD
 
 ## Component recognition
diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js
index 61ca93116..8d9a67c9c 100644
--- a/src/dom_components/view/ComponentView.js
+++ b/src/dom_components/view/ComponentView.js
@@ -64,11 +64,22 @@ export default Backbone.View.extend({
    */
   init() {},
 
+  /**
+   * Remove callback
+   */
+  removed() {},
+
   /**
    * Callback executed when the `active` event is triggered on component
    */
   onActive() {},
 
+  remove() {
+    Backbone.View.prototype.remove.apply(this, arguments);
+    this.removed(this._clbObj());
+    return this;
+  },
+
   handleDragStart(event) {
     event.preventDefault();
     event.stopPropagation();