Listen traits change on components

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();
     },

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) {

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();