diff --git a/src/style_manager/view/PropertyCompositeView.js b/src/style_manager/view/PropertyCompositeView.js index 6ab619aa1..9f008c317 100644 --- a/src/style_manager/view/PropertyCompositeView.js +++ b/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); }, /** diff --git a/src/style_manager/view/PropertyIntegerView.js b/src/style_manager/view/PropertyIntegerView.js index d0adbe56c..3008415cf 100644 --- a/src/style_manager/view/PropertyIntegerView.js +++ b/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() { diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index 964a0b651..281cef5fd 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/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}); diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index ce433afea..64b55854a 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -14,7 +14,7 @@ module.exports = Backbone.View.extend({ - ${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; }, diff --git a/test/specs/style_manager/view/PropertyView.js b/test/specs/style_manager/view/PropertyView.js index 9c5f70001..34a1d939a 100644 --- a/test/specs/style_manager/view/PropertyView.js +++ b/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);