Make use of setTimeout for components with javascript

src/canvas/view/CanvasView.js

@@ -207,9 +207,15 @@ module.exports = Backbone.View.extend({
     view.el.id = id;
     view.scriptContainer.html('');
 
-    view.scriptContainer.append('<script>' +
-      'var item = document.getElementById("'+id+'");' +
-      '(' + scrStr + '.bind(item))()</script>');
+    // In editor, I make use of setTimeout as during the append process of elements
+    // those will not be available immediatly, therefore 'item' variable
+    view.scriptContainer.append(`<script>
+        setTimeout(function() {
+          var item = document.getElementById('${id}');
+          console.log('item: ', item);
+          (${scrStr}.bind(item))()
+        }, 1);
+      </script>`);
   },
 
   /**

src/commands/index.js

@@ -160,7 +160,6 @@ module.exports = () => {
             em.set('selectedComponent', sel);
             ed.trigger('component:update', sel);
             dragger && dragger.blur();
-            console.log('onEnd ', opts);
           };
 
           const onDrag = (e, opts) => {

src/dom_components/view/ComponentView.js

@@ -290,6 +290,10 @@ module.exports = Backbone.View.extend({
    * @private
    */
   updateScript() {
+    if (!this.model.get('script')) {
+      return;
+    }
+
     var em = this.em;
     if(em) {
       var canvas = em.get('Canvas');
@@ -382,12 +386,7 @@ module.exports = Backbone.View.extend({
     var container = this.getChildrenContainer();
     container.innerHTML = model.get('content');
     this.renderChildren();
-
-    // Render script
-    if(model.get('script')) {
-      this.updateScript();
-    }
-
+    this.updateScript();
     return this;
   },