Update abstract inputs

src/domain_abstract/ui/Input.js

@@ -21,12 +21,20 @@ module.exports = Backbone.View.extend({
     this.listenTo(this.model, 'change:value', this.handleModelChange);
   },
 
+  /**
+   * Fired when the element of the property is updated
+   */
+  elementUpdated() {
+    this.model.trigger('el:change');
+  },
+
   /**
    * Handled when the view is changed
    */
   handleChange(e) {
     e.stopPropagation();
-    this.setValue(this.getInputEl().value);
+    this.model.set('value', this.getInputEl().value);
+    this.elementUpdated();
   },
 
   /**
@@ -34,25 +42,18 @@ module.exports = Backbone.View.extend({
    * @param {string} value
    * @param {Object} opts
    */
-  setValue(value, opts) {
-    var opt = opts || {};
-    var model = this.model;
-    model.set({
-      value: value || model.get('defaults')
-    }, opt);
-
-    // Generally I get silent when I need to reflect data to view without
-    // reupdating the target
-    if(opt.silent) {
-      this.handleModelChange(model, value, opt);
-    }
+  setValue(value, opts = {}) {
+    const model = this.model;
+    let val = value || model.get('defaults');
+    const input = this.getInputEl();
+    input && (input.value = val);
   },
 
   /**
    * Updates the view when the model is changed
    * */
   handleModelChange(model, value, opts) {
-    this.getInputEl().value = this.model.get('value');
+    this.setValue(value, opts);
   },
 
   /**

src/domain_abstract/ui/InputNumber.js

@@ -5,8 +5,6 @@ const $ = Backbone.$;
 
 module.exports = Backbone.View.extend({
 
-  events: {},
-
   template: _.template(`
   <span class='<%= ppfx %>input-holder'></span>
   <span class='<%= ppfx %>field-units'></span>
@@ -25,6 +23,7 @@ module.exports = Backbone.View.extend({
     this.inputCls = ppfx + 'field-number';
     this.unitCls = ppfx + 'input-unit';
     this.contClass = contClass;
+    this.events = {};
     this.events[`click .${ppfx}field-arrow-u`] = 'upArrowClick';
     this.events[`click .${ppfx}field-arrow-d`] = 'downArrowClick';
     this.events[`mousedown .${ppfx}field-arrows`] = 'downIncrement';

test/specs/grapesjs/index.js

@@ -2,7 +2,7 @@ const PluginManager = require('plugin_manager');
 
 describe('GrapesJS', () => {
 
-  describe.only('Main', () => {
+  describe('Main', () => {
 
     var obj;
     var fixtures;