diff --git a/src/trait_manager/model/Trait.js b/src/trait_manager/model/Trait.js index 0f55687c7..adec39da0 100644 --- a/src/trait_manager/model/Trait.js +++ b/src/trait_manager/model/Trait.js @@ -1,6 +1,6 @@ -var Backbone = require('backbone'); +import { isUndefined } from 'underscore'; -module.exports = Backbone.Model.extend({ +module.exports = require('backbone').Model.extend({ defaults: { type: 'text', // text, number, range, select @@ -16,13 +16,50 @@ module.exports = Backbone.Model.extend({ options: [], }, + initialize() { - if (this.get('target')) { - this.target = this.get('target'); + const target = this.get('target'); + const name = this.get('name'); + const changeProp = this.get('changeProp'); + + if (target) { + this.target = target; this.unset('target'); + const targetEvent = changeProp ? `change:${name}` : `change:attributes:${name}`; + this.listenTo(target, targetEvent, this.targetUpdated); + } + }, + + + targetUpdated() { + const value = this.getTargetValue(); + !isUndefined(value) && this.set({ value }, { fromTarget: 1 }); + }, + + + getTargetValue() { + const name = this.get('name'); + const target = this.target; + const prop = this.get('changeProp'); + if (target) return prop ? target.get(name) : target.getAttributes()[name]; + }, + + + setTargetValue(value) { + const target = this.target; + const name = this.get('name'); + if (isUndefined(value)) return; + + if (this.get('changeProp')) { + target.set(name, value); + } else { + const attrs = { ...target.get('attributes') }; + attrs[name] = value; + target.set('attributes', attrs); } }, + /** * Get the initial value of the trait * @return {string} diff --git a/src/trait_manager/view/TraitView.js b/src/trait_manager/view/TraitView.js index 607ace50b..c5e843cce 100644 --- a/src/trait_manager/view/TraitView.js +++ b/src/trait_manager/view/TraitView.js @@ -1,3 +1,6 @@ +import { isUndefined, clone } from 'underscore'; + +const Backbone = require('backbone'); const $ = Backbone.$; module.exports = Backbone.View.extend({ @@ -11,20 +14,23 @@ module.exports = Backbone.View.extend({ }, initialize(o) { - var md = this.model; + const model = this.model; + const name = model.get('name'); + const target = model.target; this.config = o.config || {}; this.pfx = this.config.stylePrefix || ''; this.ppfx = this.config.pStylePrefix || ''; - this.target = md.target; + this.target = target; this.className = this.pfx + 'trait'; this.labelClass = this.ppfx + 'label'; - this.fieldClass = this.ppfx + 'field ' + this.ppfx + 'field-' + md.get('type'); + this.fieldClass = this.ppfx + 'field ' + this.ppfx + 'field-' + model.get('type'); this.inputhClass = this.ppfx + 'input-holder'; - md.off('change:value', this.onValueChange); - this.listenTo(md, 'change:value', this.onValueChange); + model.off('change:value', this.onValueChange); + this.listenTo(model, 'change:value', this.onValueChange); this.tmpl = '