Add inputValueChanged and modelValueChanged methods to PropertyView

src/style_manager/view/PropertyCompositeView.js

@@ -20,12 +20,9 @@ module.exports = PropertyView.extend({
     this.className = this.className + ' '+ this.pfx +'composite';
   },
 
-  /**
-   * Fired when the input value is updated
-   */
-  valueUpdated(...args) {
+  inputValueChanged(...args) {
     if(!this.model.get('detached'))
-      PropertyView.prototype.valueUpdated.apply(this, args);
+      PropertyView.prototype.inputValueChanged.apply(this, args);
   },
 
   /**

src/style_manager/view/PropertyIntegerView.js

@@ -5,8 +5,9 @@ module.exports = PropertyView.extend({
 
   initialize(options) {
     PropertyView.prototype.initialize.apply(this, arguments);
-    this.listenTo(this.model, 'change:unit', this.valueChanged);
-    this.listenTo(this.model, 'el:change', this.elementUpdated);
+    const model = this.model;
+    this.listenTo(model, 'change:unit', this.modelValueChanged);
+    this.listenTo(model, 'el:change', this.elementUpdated);
   },
 
   renderInput() {

src/style_manager/view/PropertyStackView.js

@@ -25,7 +25,7 @@ module.exports = PropertyCompositeView.extend({
     this.className = `${pfx}property ${pfx}stack`;
     this.events[`click #${pfx}add`] = 'addLayer';
     this.listenTo(model, 'change:stackIndex', this.indexChanged);
-    this.listenTo(model, 'updateValue', this.valueUpdated);
+    this.listenTo(model, 'updateValue', this.inputValueChanged);
     this.delegateEvents();
   },
 
@@ -176,19 +176,16 @@ module.exports = PropertyCompositeView.extend({
       const index = layers.indexOf(layer);
       layer.set('value', this.model.getDefaultValue(1));
 
-      // In detached mode valueUpdated will add new 'layer value'
+      // In detached mode inputValueChanged will add new 'layer value'
       // to all subprops
-      this.valueUpdated();
+      this.inputValueChanged();
 
       // This will set subprops with a new default values
       this.model.set('stackIndex', index);
     }
   },
 
-  /**
-   * Fired when the input value is updated
-   */
-  valueUpdated() {
+  inputValueChanged() {
     var model = this.model;
 
     if (!model.get('detached')) {
@@ -311,7 +308,7 @@ module.exports = PropertyCompositeView.extend({
 
     // Avoid updating with detached as it will cause issues on next change
     if (!detached) {
-      this.valueUpdated();
+      this.inputValueChanged();
     }
 
     this.model.set({stackIndex: null}, {silent: true});

src/style_manager/view/PropertyView.js

@@ -14,7 +14,7 @@ module.exports = Backbone.View.extend({
         </span>
         <b class="${pfx}clear">&Cross;</b>
       </div>
-      ${this.templateField()}
+      ${this.templateField(model)}
     `;
   },
 
@@ -30,7 +30,7 @@ module.exports = Backbone.View.extend({
   },
 
   events: {
-    'change': 'valueUpdated'
+    'change': 'inputValueChanged'
   },
 
   initialize(o) {
@@ -57,7 +57,7 @@ module.exports = Backbone.View.extend({
 
     this.listenTo(this.propTarget, 'update', this.targetUpdated);
     this.listenTo(model, 'destroy remove', this.remove);
-    this.listenTo(model, 'change:value', this.valueChanged);
+    this.listenTo(model, 'change:value', this.modelValueChanged);
     this.listenTo(model, 'targetUpdated', this.targetUpdated);
     this.listenTo(model, 'change:visible', this.updateVisibility);
     this.listenTo(model, 'change:status', this.updateStatus);
@@ -134,9 +134,10 @@ module.exports = Backbone.View.extend({
   },
 
   /**
-   * Fired when the input value is updated
+   * Triggers when the value of element input/s is changed, so have to update
+   * the value of the model which will propogate those changes to the target
    */
-  valueUpdated() {
+  inputValueChanged() {
     this.model.set('value', this.getInputValue());
     this.elementUpdated();
   },
@@ -284,13 +285,13 @@ module.exports = Backbone.View.extend({
   },
 
   /**
-   * Triggers when the 'value' of the model changes, so I have to update
-   * the target model
-   * @param   {Object}  e  Events
-   * @param    {Mixed}    val  Value
-   * @param    {Object}  opt  Options
+   * Triggers when the `value` of the model changes, so the target and
+   * the input element should be updated
+   * @param {Object} e  Event
+   * @param {Mixed} val  Value
+   * @param {Object} opt  Options
    * */
-  valueChanged(e, val, opt) {
+  modelValueChanged(e, val, opt) {
     const em = this.config.em;
     const model = this.model;
     const value = model.getFullValue();
@@ -434,8 +435,8 @@ module.exports = Backbone.View.extend({
   render() {
     const el = this.el;
     el.innerHTML = this.template(this.model);
-    this.renderInput();
     el.className = this.className;
+    this.renderInput();
     this.updateStatus();
     return this;
   },

test/specs/style_manager/view/PropertyView.js

@@ -69,13 +69,13 @@ module.exports = {
           expect(view.model.get('value')).toNotExist();
         });
 
-        // Tests valueUpdated()
+        // Tests inputValueChanged()
         it('Update model on input change', () => {
           view.$input.val(propValue).trigger('change');
           expect(view.model.get('value')).toEqual(propValue);
         });
 
-        // Tests valueChanged() -> ...
+        // Tests modelValueChanged() -> ...
         it('Update input on value change', () => {
           view.model.set('value', propValue);
           expect(view.$input.val()).toEqual(propValue);