Change to to use classes

src/canvas/view/FramesView.js

@@ -1,21 +1,21 @@
 import DomainViews from 'domain_abstract/view/DomainViews';
 import FrameWrapView from './FrameWrapView';
 
-export default DomainViews.extend({
-  itemView: FrameWrapView,
-  autoAdd: 1,
-
-  init() {
+export default class FramesView extends DomainViews {
+  constructor(opts = {}, config) {
+    super(opts, config, true);
     this.listenTo(this.collection, 'reset', this.render);
-  },
+  }
 
   onRemoveBefore(items, opts) {
     items.forEach(item => item.remove(opts));
-  },
+  }
 
   onRender() {
     const { config, $el } = this;
     const { em } = config;
     em && $el.attr({ class: `${em.getConfig('stylePrefix')}frames` });
   }
-});
+}
+
+FramesView.prototype.itemView = FrameWrapView;

src/dom_components/view/ToolbarView.js

@@ -1,11 +1,12 @@
 import DomainViews from 'domain_abstract/view/DomainViews';
 import ToolbarButtonView from './ToolbarButtonView';
 
-export default DomainViews.extend({
-  itemView: ToolbarButtonView,
-
-  initialize(opts = {}) {
+export default class ToolbarView extends DomainViews {
+  constructor(opts = {}, config) {
+    super(opts, config);
     this.config = { editor: opts.editor || '', em: opts.em };
     this.listenTo(this.collection, 'reset', this.render);
   }
-});
+}
+
+ToolbarView.prototype.itemView = ToolbarButtonView;

src/domain_abstract/ui/Input.js

@@ -2,37 +2,34 @@ import Backbone from 'backbone';
 
 const $ = Backbone.$;
 
-export default Backbone.View.extend({
-  events: {
-    change: 'handleChange',
-  },
-
+export default class Input extends Backbone.View {
   template() {
     return `<span class="${this.holderClass()}"></span>`;
-  },
+  }
 
   inputClass() {
     return `${this.ppfx}field`;
-  },
+  }
 
   holderClass() {
     return `${this.ppfx}input-holder`;
-  },
+  }
 
-  initialize(opts = {}) {
+  constructor(opts = {}) {
+    super(opts);
     const ppfx = opts.ppfx || '';
     this.opts = opts;
     this.ppfx = ppfx;
     this.em = opts.target || {};
     !opts.onChange && this.listenTo(this.model, 'change:value', this.handleModelChange);
-  },
+  }
 
   /**
    * Fired when the element of the property is updated
    */
   elementUpdated() {
     this.model.trigger('el:change');
-  },
+  }
 
   /**
    * Set value to the input element
@@ -43,14 +40,14 @@ export default Backbone.View.extend({
     let val = value || model.get('defaults');
     const input = this.getInputEl();
     input && (input.value = val);
-  },
+  }
 
   /**
    * Updates the view when the model is changed
    * */
   handleModelChange(model, value, opts) {
     this.setValue(value, opts);
-  },
+  }
 
   /**
    * Handled when the view is changed
@@ -60,11 +57,11 @@ export default Backbone.View.extend({
     const value = this.getInputEl().value;
     this.__onInputChange(value);
     this.elementUpdated();
-  },
+  }
 
   __onInputChange(value) {
     this.model.set({ value }, { fromInput: 1 });
-  },
+  }
 
   /**
    * Get the input element
@@ -79,7 +76,7 @@ export default Backbone.View.extend({
     }
 
     return this.inputEl.get(0);
-  },
+  }
 
   render() {
     this.inputEl = null;
@@ -88,5 +85,9 @@ export default Backbone.View.extend({
     el.html(this.template());
     el.find(`.${this.holderClass()}`).append(this.getInputEl());
     return this;
-  },
-});
+  }
+}
+
+Input.prototype.events = {
+  change: 'handleChange',
+};

src/domain_abstract/ui/InputColor.js

@@ -12,7 +12,7 @@ const getColor = color => {
   return name || cl.replace(/ /g, '');
 };
 
-export default Input.extend({
+export default class InputColor extends Input {
   template() {
     const ppfx = this.ppfx;
     return `
@@ -23,28 +23,28 @@ export default Input.extend({
         </div>
       </div>
     `;
-  },
+  }
 
   inputClass() {
     const ppfx = this.ppfx;
     return `${ppfx}field ${ppfx}field-color`;
-  },
+  }
 
   holderClass() {
     return `${this.ppfx}input-holder`;
-  },
+  }
 
   remove() {
     Input.prototype.remove.apply(this, arguments);
     this.colorEl.spectrum('destroy');
-  },
+  }
 
   handleChange(e) {
     e.stopPropagation();
     const { value } = e.target;
     if (isUndefined(value)) return;
     this.__onInputChange(value);
-  },
+  }
 
   __onInputChange(val) {
     const { model, opts } = this;
@@ -61,7 +61,7 @@ export default Input.extend({
     }
 
     onChange ? onChange(value) : model.set({ value }, { fromInput: 1 });
-  },
+  }
 
   /**
    * Set value to the model
@@ -83,7 +83,7 @@ export default Input.extend({
       colorEl.spectrum('set', valueClr);
       this.noneColor = value == 'none';
     }
-  },
+  }
 
   /**
    * Get the color input element
@@ -162,12 +162,12 @@ export default Input.extend({
       this.colorEl = colorEl;
     }
     return this.colorEl;
-  },
+  }
 
   render() {
     Input.prototype.render.call(this);
     // This will make the color input available on render
     this.getColorEl();
     return this;
-  },
-});
+  }
+}

src/domain_abstract/ui/InputNumber.js

@@ -5,16 +5,7 @@ import Input from './Input';
 
 const $ = Backbone.$;
 
-export default Input.extend({
-  events: {
-    'change input': 'handleChange',
-    'change select': 'handleUnitChange',
-    'click [data-arrow-up]': 'upArrowClick',
-    'click [data-arrow-down]': 'downArrowClick',
-    'mousedown [data-arrows]': 'downIncrement',
-    keydown: 'handleKeyDown',
-  },
-
+export default class InputNumber extends Input {
   template() {
     const ppfx = this.ppfx;
     return `
@@ -25,19 +16,19 @@ export default Input.extend({
         <div class="${ppfx}field-arrow-d" data-arrow-down></div>
       </div>
     `;
-  },
+  }
 
   inputClass() {
     const ppfx = this.ppfx;
     return this.opts.contClass || `${ppfx}field ${ppfx}field-integer`;
-  },
+  }
 
-  initialize(opts = {}) {
-    Input.prototype.initialize.apply(this, arguments);
+  constructor(opts = {}) {
+    super(opts);
     bindAll(this, 'moveIncrement', 'upIncrement');
     this.doc = document;
     this.listenTo(this.model, 'change:unit', this.handleModelChange);
-  },
+  }
 
   /**
    * Set value to the model
@@ -61,7 +52,7 @@ export default Input.extend({
     if (opt.silent) {
       this.handleModelChange();
     }
-  },
+  }
 
   /**
    * Handled when the view is changed
@@ -70,7 +61,7 @@ export default Input.extend({
     e.stopPropagation();
     this.setValue(this.getInputEl().value);
     this.elementUpdated();
-  },
+  }
 
   /**
    * Handled when the view is changed
@@ -80,7 +71,7 @@ export default Input.extend({
     var value = this.getUnitEl().value;
     this.model.set('unit', value);
     this.elementUpdated();
-  },
+  }
 
   /**
    * Handled when user uses keyboard
@@ -95,14 +86,14 @@ export default Input.extend({
       e.preventDefault();
       this.downArrowClick();
     }
-  },
+  }
 
   /**
    * Fired when the element of the property is updated
    */
   elementUpdated() {
     this.model.trigger('el:change');
-  },
+  }
 
   /**
    * Updates the view when the model is changed
@@ -112,7 +103,7 @@ export default Input.extend({
     this.getInputEl().value = model.get('value');
     const unitEl = this.getUnitEl();
     unitEl && (unitEl.value = model.get('unit') || '');
-  },
+  }
 
   /**
    * Get the unit element
@@ -138,7 +129,7 @@ export default Input.extend({
     }
 
     return this.unitEl;
-  },
+  }
 
   /**
    * Invoked when the up arrow is clicked
@@ -149,7 +140,7 @@ export default Input.extend({
     let value = parseFloat(model.get('value'));
     this.setValue(this.normalizeValue(value + step));
     this.elementUpdated();
-  },
+  }
 
   /**
    * Invoked when the down arrow is clicked
@@ -160,7 +151,7 @@ export default Input.extend({
     const value = parseFloat(model.get('value'));
     this.setValue(this.normalizeValue(value - step));
     this.elementUpdated();
-  },
+  }
 
   /**
    * Change easily integer input value with click&drag method
@@ -176,7 +167,7 @@ export default Input.extend({
     this.current = { y: e.pageY, val: value };
     on(this.doc, 'mousemove', this.moveIncrement);
     on(this.doc, 'mouseup', this.upIncrement);
-  },
+  }
 
   /** While the increment is clicked, moving the mouse will update input value
    * @param Object
@@ -193,7 +184,7 @@ export default Input.extend({
     this.prValue = value;
     model.set({ value, unit }, { avoidStore: 1 });
     return false;
-  },
+  }
 
   /**
    * Stop moveIncrement method
@@ -209,7 +200,7 @@ export default Input.extend({
       model.set('value', value, { avoidStore: 1 }).set('value', value + step);
       this.elementUpdated();
     }
-  },
+  }
 
   normalizeValue(value, defValue = 0) {
     const model = this.model;
@@ -228,7 +219,7 @@ export default Input.extend({
     }
 
     return stepDecimals ? parseFloat(value.toFixed(stepDecimals)) : value;
-  },
+  }
 
   /**
    * Validate input value
@@ -281,7 +272,7 @@ export default Input.extend({
       value: val,
       unit,
     };
-  },
+  }
 
   render() {
     Input.prototype.render.call(this);
@@ -289,5 +280,14 @@ export default Input.extend({
     const unit = this.getUnitEl();
     unit && this.$el.find(`.${this.ppfx}field-units`).get(0).appendChild(unit);
     return this;
-  },
-});
+  }
+}
+
+InputNumber.prototype.events = {
+  'change input': 'handleChange',
+  'change select': 'handleUnitChange',
+  'click [data-arrow-up]': 'upArrowClick',
+  'click [data-arrow-down]': 'downArrowClick',
+  'mousedown [data-arrows]': 'downIncrement',
+  keydown: 'handleKeyDown',
+};

src/domain_abstract/view/DomainViews.js

@@ -1,25 +1,20 @@
 import { includes } from 'underscore';
 import Backbone from 'backbone';
 
-export default Backbone.View.extend({
-  // Default view
-  itemView: '',
-
+export default class DomainViews extends Backbone.View {
   // Defines the View per type
-  itemsView: '',
+  itemsView = '';
 
-  itemType: 'type',
+  itemType = 'type';
 
-  autoAdd: 0,
+  reuseView = false;
 
-  initialize(opts = {}, config) {
+  constructor(opts = {}, config, autoAdd = false) {
+    super(opts);
     this.config = config || opts.config || {};
-    this.autoAdd && this.listenTo(this.collection, 'add', this.addTo);
+    autoAdd && this.listenTo(this.collection, 'add', this.addTo);
     this.items = [];
-    this.init();
-  },
-
-  init() {},
+  }
 
   /**
    * Add new model to the collection
@@ -28,14 +23,14 @@ export default Backbone.View.extend({
    * */
   addTo(model) {
     this.add(model);
-  },
+  }
 
   itemViewNotFound(type) {
     const { config, ns } = this;
     const { em } = config;
     const warn = `${ns ? `[${ns}]: ` : ''}'${type}' type not found`;
     em && em.logWarning(warn);
-  },
+  }
 
   /**
    * Render new model inside the view
@@ -67,7 +62,7 @@ export default Backbone.View.extend({
       'text',
       'time',
       'url',
-      'week'
+      'week',
     ];
     var frag = fragment || null;
     var itemView = this.itemView;
@@ -76,11 +71,7 @@ export default Backbone.View.extend({
 
     if (itemsView[typeField]) {
       itemView = itemsView[typeField];
-    } else if (
-      typeField &&
-      !itemsView[typeField] &&
-      !includes(inputTypes, typeField)
-    ) {
+    } else if (typeField && !itemsView[typeField] && !includes(inputTypes, typeField)) {
       this.itemViewNotFound(typeField);
     }
 
@@ -95,7 +86,7 @@ export default Backbone.View.extend({
 
     if (frag) frag.appendChild(rendered);
     else this.$el.append(rendered);
-  },
+  }
 
   render() {
     var frag = document.createDocumentFragment();
@@ -103,19 +94,19 @@ export default Backbone.View.extend({
     this.$el.empty();
 
     if (this.collection.length)
-      this.collection.each(function(model) {
+      this.collection.each(function (model) {
         this.add(model, frag);
       }, this);
 
     this.$el.append(frag);
     this.onRender();
     return this;
-  },
+  }
 
-  onRender() {},
+  onRender() {}
 
-  onRemoveBefore() {},
-  onRemove() {},
+  onRemoveBefore() {}
+  onRemove() {}
 
   remove(opts = {}) {
     const { items } = this;
@@ -123,7 +114,7 @@ export default Backbone.View.extend({
     this.clearItems();
     Backbone.View.prototype.remove.apply(this, arguments);
     this.onRemove(items, opts);
-  },
+  }
 
   clearItems() {
     const items = this.items || [];
@@ -131,4 +122,7 @@ export default Backbone.View.extend({
     // items.forEach(item => item.remove());
     // this.items = [];
   }
-});
+}
+
+// Default view
+DomainViews.prototype.itemView = '';

src/trait_manager/index.js

@@ -142,14 +142,15 @@ export default () => {
       let { view } = this;
       const config = this.getConfig();
       const el = view && view.el;
-      view = new TraitsView({
-        el,
-        collection: [],
-        editor: config.em,
-        config,
-      });
-      view.itemsView = this.getTypes();
-      view.updatedCollection();
+      view = new TraitsView(
+        {
+          el,
+          collection: [],
+          editor: config.em,
+          config,
+        },
+        this.getTypes()
+      );
       this.view = view;
       return view.el;
     },

src/trait_manager/view/TraitButtonView.js

@@ -1,14 +1,14 @@
 import { isString } from 'underscore';
 import TraitView from './TraitView';
 
-export default TraitView.extend({
-  eventCapture: ['click button'],
+export default class TraitButtonView extends TraitView {
+  eventCapture = ['click button'];
 
-  templateInput: '',
+  templateInput = '';
 
   onChange() {
     this.handleClick();
-  },
+  }
 
   handleClick() {
     const { model, em } = this;
@@ -21,13 +21,13 @@ export default TraitView.extend({
         command(em.get('Editor'), model);
       }
     }
-  },
+  }
 
   renderLabel() {
     if (this.model.get('label')) {
       TraitView.prototype.renderLabel.apply(this, arguments);
     }
-  },
+  }
 
   getInputEl() {
     const { model, ppfx } = this;
@@ -39,4 +39,4 @@ export default TraitView.extend({
     }">${label}</button>`;
     return input;
   }
-});
+}

src/trait_manager/view/TraitCheckboxView.js

@@ -1,15 +1,15 @@
 import { isUndefined } from 'underscore';
 import TraitView from './TraitView';
 
-export default TraitView.extend({
-  appendInput: 0,
+export default class TraitCheckboxView extends TraitView {
+  appendInput = false;
 
   templateInput() {
     const { ppfx, clsField } = this;
     return `<label class="${clsField}" data-input>
     <i class="${ppfx}chk-icon"></i>
   </label>`;
-  },
+  }
 
   /**
    * Fires when the input is changed
@@ -18,7 +18,7 @@ export default TraitView.extend({
   onChange() {
     const value = this.getInputElem().checked;
     this.model.set('value', this.getCheckedValue(value));
-  },
+  }
 
   getCheckedValue(checked) {
     let result = checked;
@@ -33,7 +33,7 @@ export default TraitView.extend({
     }
 
     return result;
-  },
+  }
 
   /**
    * Returns input element
@@ -67,4 +67,4 @@ export default TraitView.extend({
 
     return el;
   }
-});
+}

src/trait_manager/view/TraitColorView.js

@@ -1,8 +1,8 @@
 import TraitView from './TraitView';
 import InputColor from 'domain_abstract/ui/InputColor';
 
-export default TraitView.extend({
-  templateInput: '',
+export default class TraitColorView extends TraitView {
+  templateInput = '';
 
   /**
    * Returns input element
@@ -17,7 +17,7 @@ export default TraitView.extend({
         model,
         target: this.config.em,
         contClass: this.ppfx + 'field-color',
-        ppfx: this.ppfx
+        ppfx: this.ppfx,
       });
       const input = inputColor.render();
       input.setValue(value, { fromTarget: 1 });
@@ -26,4 +26,4 @@ export default TraitView.extend({
 
     return this.input;
   }
-});
+}

src/trait_manager/view/TraitNumberView.js

@@ -2,14 +2,12 @@ import TraitView from './TraitView';
 import { isUndefined } from 'underscore';
 import InputNumber from 'domain_abstract/ui/InputNumber';
 
-export default TraitView.extend({
+export default class TraitNumberView extends TraitView {
   getValueForTarget() {
     const { model } = this;
     const { value, unit } = model.attributes;
-    return !isUndefined(value) && value !== ''
-      ? value + unit
-      : model.get('default');
-  },
+    return !isUndefined(value) && value !== '' ? value + unit : model.get('default');
+  }
 
   /**
    * Returns input element
@@ -24,7 +22,7 @@ export default TraitView.extend({
         contClass: `${ppfx}field-int`,
         type: 'number',
         model: model,
-        ppfx
+        ppfx,
       });
       this.input = inputNumber.render();
       this.$input = this.input.inputEl;
@@ -35,4 +33,4 @@ export default TraitView.extend({
     }
     return this.input;
   }
-});
+}

src/trait_manager/view/TraitSelectView.js

@@ -4,10 +4,11 @@ import TraitView from './TraitView';
 
 const $ = Backbone.$;
 
-export default TraitView.extend({
-  init() {
+export default class TraitSelectView extends TraitView {
+  constructor(o = {}) {
+    super(o);
     this.listenTo(this.model, 'change:options', this.rerender);
-  },
+  }
 
   templateInput() {
     const { ppfx, clsField } = this;
@@ -17,7 +18,7 @@ export default TraitView.extend({
         <div class="${ppfx}d-s-arrow"></div>
       </div>
     </div>`;
-  },
+  }
 
   /**
    * Returns input element
@@ -41,15 +42,11 @@ export default TraitView.extend({
           value = el;
         } else {
           name = el.name || el.label || el.value;
-          value = `${isUndefined(el.value) ? el.id : el.value}`.replace(
-            /"/g,
-            '&quot;'
-          );
+          value = `${isUndefined(el.value) ? el.id : el.value}`.replace(/"/g, '&quot;');
           style = el.style ? el.style.replace(/"/g, '&quot;') : '';
           attrs += style ? ` style="${style}"` : '';
         }
-        const resultName =
-          em.t(`traitManager.traits.options.${propName}.${value}`) || name;
+        const resultName = em.t(`traitManager.traits.options.${propName}.${value}`) || name;
         input += `<option value="${value}"${attrs}>${resultName}</option>`;
         values.push(value);
       });
@@ -63,4 +60,4 @@ export default TraitView.extend({
 
     return this.$input.get(0);
   }
-});
+}

src/trait_manager/view/TraitView.js

@@ -4,28 +4,29 @@ import { capitalize } from 'utils/mixins';
 
 const $ = Backbone.$;
 
-export default Backbone.View.extend({
-  events: {},
-  eventCapture: ['change'],
+export default class TraitView extends Backbone.View {
+  events = {};
+  // protected eventCapture = ['change'];
 
-  appendInput: 1,
+  appendInput = true;
 
   attributes() {
     return this.model.get('attributes');
-  },
+  }
 
   templateLabel() {
     const { ppfx } = this;
     const label = this.getLabel();
     return `<div class="${ppfx}label" title="${label}">${label}</div>`;
-  },
+  }
 
   templateInput() {
     const { clsField } = this;
     return `<div class="${clsField}" data-input></div>`;
-  },
+  }
 
-  initialize(o = {}) {
+  constructor(o = {}) {
+    super(o);
     const { config = {} } = o;
     const { model, eventCapture } = this;
     const { target } = model;
@@ -39,7 +40,7 @@ export default Backbone.View.extend({
     this.clsField = `${ppfx}field ${ppfx}field-${type}`;
     [
       ['change:value', this.onValueChange],
-      ['remove', this.removeView]
+      ['remove', this.removeView],
     ].forEach(([event, clb]) => {
       model.off(event, clb);
       this.listenTo(model, event, clb);
@@ -51,26 +52,26 @@ export default Backbone.View.extend({
     eventCapture.forEach(event => (this.events[event] = 'onChange'));
     this.delegateEvents();
     this.init();
-  },
+  }
 
   getClbOpts() {
     return {
       component: this.target,
       trait: this.model,
-      elInput: this.getInputElem()
+      elInput: this.getInputElem(),
     };
-  },
+  }
 
   removeView() {
     this.remove();
     this.removed();
-  },
+  }
 
-  init() {},
-  removed() {},
-  onRender() {},
-  onUpdate() {},
-  onEvent() {},
+  init() {}
+  removed() {}
+  onRender() {}
+  onUpdate() {}
+  onEvent() {}
 
   /**
    * Fires when the input is changed
@@ -83,18 +84,18 @@ export default Backbone.View.extend({
     }
     this.onEvent({
       ...this.getClbOpts(),
-      event
+      event,
     });
-  },
+  }
 
   getValueForTarget() {
     return this.model.get('value');
-  },
+  }
 
   setInputValue(value) {
     const el = this.getInputElem();
     el && (el.value = value);
-  },
+  }
 
   /**
    * On change callback
@@ -108,7 +109,7 @@ export default Backbone.View.extend({
       const val = this.getValueForTarget();
       model.setTargetValue(val, opts);
     }
-  },
+  }
 
   /**
    * Render label
@@ -124,12 +125,12 @@ export default Backbone.View.extend({
         this.createLabel({
           label,
           component: target,
-          trait: this
+          trait: this,
         }) || '';
     }
 
     $el.find('[data-label]').append(tpl);
-  },
+  }
 
   /**
    * Returns label for the input
@@ -139,18 +140,15 @@ export default Backbone.View.extend({
   getLabel() {
     const { em } = this;
     const { label, name } = this.model.attributes;
-    return (
-      em.t(`traitManager.traits.labels.${name}`) ||
-      capitalize(label || name).replace(/-/g, ' ')
-    );
-  },
+    return em.t(`traitManager.traits.labels.${name}`) || capitalize(label || name).replace(/-/g, ' ');
+  }
 
   /**
    * Returns current target component
    */
   getComponent() {
     return this.target;
-  },
+  }
 
   /**
    * Returns input element
@@ -187,14 +185,12 @@ export default Backbone.View.extend({
       this.$input = input;
     }
     return this.$input.get(0);
-  },
+  }
 
   getInputElem() {
     const { input, $input } = this;
-    return (
-      input || ($input && $input.get && $input.get(0)) || this.getElInput()
-    );
-  },
+    return input || ($input && $input.get && $input.get(0)) || this.getElInput();
+  }
 
   getModelValue() {
     let value;
@@ -210,11 +206,11 @@ export default Backbone.View.extend({
     }
 
     return !isUndefined(value) ? value : '';
-  },
+  }
 
   getElInput() {
     return this.elInput;
-  },
+  }
 
   /**
    * Renders input
@@ -227,9 +223,7 @@ export default Backbone.View.extend({
     let tpl = model.el;
 
     if (!tpl) {
-      tpl = this.createInput
-        ? this.createInput(this.getClbOpts())
-        : this.getInputEl();
+      tpl = this.createInput ? this.createInput(this.getClbOpts()) : this.getInputEl();
     }
 
     if (isString(tpl)) {
@@ -241,21 +235,21 @@ export default Backbone.View.extend({
     }
 
     model.el = this.elInput;
-  },
+  }
 
   hasLabel() {
     const { label } = this.model.attributes;
     return !this.noLabel && label !== false;
-  },
+  }
 
   rerender() {
     this.model.el = null;
     this.render();
-  },
+  }
 
   postUpdate() {
     this.onUpdate(this.getClbOpts());
-  },
+  }
 
   render() {
     const { $el, pfx, ppfx, model } = this;
@@ -283,4 +277,5 @@ export default Backbone.View.extend({
     this.onRender(this.getClbOpts());
     return this;
   }
-});
+}
+TraitView.prototype.eventCapture = ['change'];

src/trait_manager/view/TraitsView.js

@@ -1,12 +1,12 @@
 import DomainViews from 'domain_abstract/view/DomainViews';
 import TraitView from './TraitView';
 
-export default DomainViews.extend({
-  ns: 'Traits',
-  itemView: TraitView,
-  reuseView: 1,
+export default class TraitsView extends DomainViews {
+  reuseView = true;
 
-  initialize(o = {}) {
+  constructor(o = {}, itemsView) {
+    super(o);
+    this.itemView = itemsView;
     const config = o.config || {};
     const pfx = config.stylePrefix || '';
     const em = o.editor;
@@ -16,7 +16,8 @@ export default DomainViews.extend({
     this.ppfx = config.pStylePrefix || '';
     this.className = `${pfx}traits`;
     this.listenTo(em, 'component:toggled', this.updatedCollection);
-  },
+    this.updatedCollection();
+  }
 
   /**
    * Update view collection
@@ -29,4 +30,6 @@ export default DomainViews.extend({
     this.collection = comp ? comp.get('traits') : [];
     this.render();
   }
-});
+}
+
+TraitView.prototype.itemView = TraitView;