From d2f3404c1ca14f3ececaeba6cf6000a6824aa0ba Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 30 Mar 2022 21:59:20 +0200 Subject: [PATCH] Change to to use classes --- src/canvas/view/FramesView.js | 16 ++-- src/dom_components/view/ToolbarView.js | 11 +-- src/domain_abstract/ui/Input.js | 37 ++++----- src/domain_abstract/ui/InputColor.js | 22 +++--- src/domain_abstract/ui/InputNumber.js | 62 +++++++-------- src/domain_abstract/view/DomainViews.js | 52 ++++++------ src/trait_manager/index.js | 17 ++-- src/trait_manager/view/TraitButtonView.js | 14 ++-- src/trait_manager/view/TraitCheckboxView.js | 12 +-- src/trait_manager/view/TraitColorView.js | 8 +- src/trait_manager/view/TraitNumberView.js | 12 ++- src/trait_manager/view/TraitSelectView.js | 19 ++--- src/trait_manager/view/TraitView.js | 87 ++++++++++----------- src/trait_manager/view/TraitsView.js | 17 ++-- 14 files changed, 188 insertions(+), 198 deletions(-) diff --git a/src/canvas/view/FramesView.js b/src/canvas/view/FramesView.js index 260be9245..c15908839 100644 --- a/src/canvas/view/FramesView.js +++ b/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; diff --git a/src/dom_components/view/ToolbarView.js b/src/dom_components/view/ToolbarView.js index d786e1416..9f39f0763 100644 --- a/src/dom_components/view/ToolbarView.js +++ b/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; diff --git a/src/domain_abstract/ui/Input.js b/src/domain_abstract/ui/Input.js index 10adee816..18d1fd0bf 100644 --- a/src/domain_abstract/ui/Input.js +++ b/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 ``; - }, + } 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', +}; diff --git a/src/domain_abstract/ui/InputColor.js b/src/domain_abstract/ui/InputColor.js index 2618b3aaa..dec222d91 100644 --- a/src/domain_abstract/ui/InputColor.js +++ b/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({ `; - }, + } 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; - }, -}); + } +} diff --git a/src/domain_abstract/ui/InputNumber.js b/src/domain_abstract/ui/InputNumber.js index 9cd085b38..f81be3db3 100644 --- a/src/domain_abstract/ui/InputNumber.js +++ b/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({
`; - }, + } 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', +}; diff --git a/src/domain_abstract/view/DomainViews.js b/src/domain_abstract/view/DomainViews.js index 2e2f03298..0783e8e3f 100644 --- a/src/domain_abstract/view/DomainViews.js +++ b/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 = ''; diff --git a/src/trait_manager/index.js b/src/trait_manager/index.js index 1f561662f..39e760385 100644 --- a/src/trait_manager/index.js +++ b/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; }, diff --git a/src/trait_manager/view/TraitButtonView.js b/src/trait_manager/view/TraitButtonView.js index 7bd8c155a..2e08e6791 100644 --- a/src/trait_manager/view/TraitButtonView.js +++ b/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}`; return input; } -}); +} diff --git a/src/trait_manager/view/TraitCheckboxView.js b/src/trait_manager/view/TraitCheckboxView.js index 4db12602f..0b2ed74f0 100644 --- a/src/trait_manager/view/TraitCheckboxView.js +++ b/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 ``; - }, + } /** * 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; } -}); +} diff --git a/src/trait_manager/view/TraitColorView.js b/src/trait_manager/view/TraitColorView.js index 3e3193544..21acbf743 100644 --- a/src/trait_manager/view/TraitColorView.js +++ b/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; } -}); +} diff --git a/src/trait_manager/view/TraitNumberView.js b/src/trait_manager/view/TraitNumberView.js index 75e04a10b..c6d45c12f 100644 --- a/src/trait_manager/view/TraitNumberView.js +++ b/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; } -}); +} diff --git a/src/trait_manager/view/TraitSelectView.js b/src/trait_manager/view/TraitSelectView.js index 04221139d..db7e07458 100644 --- a/src/trait_manager/view/TraitSelectView.js +++ b/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({
`; - }, + } /** * 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, - '"' - ); + value = `${isUndefined(el.value) ? el.id : el.value}`.replace(/"/g, '"'); style = el.style ? el.style.replace(/"/g, '"') : ''; 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 += ``; values.push(value); }); @@ -63,4 +60,4 @@ export default TraitView.extend({ return this.$input.get(0); } -}); +} diff --git a/src/trait_manager/view/TraitView.js b/src/trait_manager/view/TraitView.js index 7f2f8dbbb..ba732db5b 100644 --- a/src/trait_manager/view/TraitView.js +++ b/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 `
${label}
`; - }, + } templateInput() { const { clsField } = this; return `
`; - }, + } - 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']; diff --git a/src/trait_manager/view/TraitsView.js b/src/trait_manager/view/TraitsView.js index 5db8bd000..e9cc76d81 100644 --- a/src/trait_manager/view/TraitsView.js +++ b/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;