diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index 0a74129d9..77304b691 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -186,8 +186,12 @@ const Component = Backbone.Model.extend(Styleable).extend( this.initComponents(); this.initToolbar(); this.set('status', ''); - this.listenTo(this.get('classes'), 'add remove change', () => - this.emitUpdate('classes') + + // Register global updates for collection properties + ['classes', 'traits'].forEach(name => + this.listenTo(this.get(name), 'add remove change', () => + this.emitUpdate(name) + ) ); this.init(); }, diff --git a/src/trait_manager/model/Traits.js b/src/trait_manager/model/Traits.js index 55a57aa64..5e6aa2dd1 100644 --- a/src/trait_manager/model/Traits.js +++ b/src/trait_manager/model/Traits.js @@ -8,6 +8,15 @@ module.exports = Backbone.Collection.extend({ initialize(coll, options = {}) { this.em = options.em || ''; + this.listenTo(this, 'add', this.handleAdd); + }, + + handleAdd(model) { + const target = this.target; + + if (target) { + model.target = target; + } }, setTarget(target) { diff --git a/src/trait_manager/view/TraitsView.js b/src/trait_manager/view/TraitsView.js index 75367430e..71ab4c02b 100644 --- a/src/trait_manager/view/TraitsView.js +++ b/src/trait_manager/view/TraitsView.js @@ -23,7 +23,8 @@ module.exports = DomainViews.extend({ this.pfx = config.stylePrefix || ''; this.ppfx = config.pStylePrefix || ''; this.className = this.pfx + 'traits'; - this.listenTo(this.em, 'change:selectedComponent', this.updatedCollection); + const toListen = 'component:selected component:update:traits'; + this.listenTo(this.em, toListen, this.updatedCollection); this.updatedCollection(); }, @@ -33,8 +34,9 @@ module.exports = DomainViews.extend({ */ updatedCollection() { const ppfx = this.ppfx; + const comp = this.em.getSelected(); this.el.className = `${this.className} ${ppfx}one-bg ${ppfx}two-color`; - var comp = this.em.get('selectedComponent'); + if (comp) { this.collection = comp.get('traits'); this.render();