diff --git a/src/style_manager/view/SectorView.js b/src/style_manager/view/SectorView.js index 2608d6984..599a24fac 100644 --- a/src/style_manager/view/SectorView.js +++ b/src/style_manager/view/SectorView.js @@ -1,17 +1,22 @@ -import Backbone from 'backbone'; -import { template } from 'underscore'; +import { View } from 'backbone'; +import html from 'utils/html'; import PropertiesView from './PropertiesView'; -export default Backbone.View.extend({ - template: template(` -
- - <%= label %> -
`), +export default class SectorView extends View { + template({ pfx, label }) { + return html` +
+ + ${label} +
+ `; + } - events: { - 'click [data-sector-title]': 'toggle' - }, + events() { + return { + 'click [data-sector-title]': 'toggle' + }; + } initialize(o) { this.config = o.config || {}; @@ -25,7 +30,7 @@ export default Backbone.View.extend({ this.listenTo(model, 'change:open', this.updateOpen); this.listenTo(model, 'updateVisibility', this.updateVisibility); this.listenTo(model, 'destroy remove', this.remove); - }, + } /** * If all properties are hidden this will hide the sector @@ -38,7 +43,7 @@ export default Backbone.View.extend({ } }); this.el.style.display = show ? '' : 'none'; - }, + } /** * Update visibility @@ -46,7 +51,7 @@ export default Backbone.View.extend({ updateOpen() { if (this.model.get('open')) this.show(); else this.hide(); - }, + } /** * Show the content of the sector @@ -55,7 +60,7 @@ export default Backbone.View.extend({ this.$el.addClass(this.pfx + 'open'); this.getPropertiesEl().style.display = ''; this.$caret.removeClass(this.caretR).addClass(this.caretD); - }, + } /** * Hide the content of the sector @@ -64,19 +69,20 @@ export default Backbone.View.extend({ this.$el.removeClass(this.pfx + 'open'); this.getPropertiesEl().style.display = 'none'; this.$caret.removeClass(this.caretD).addClass(this.caretR); - }, + } getPropertiesEl() { return this.$el.find(`.${this.pfx}properties`).get(0); - }, + } /** * Toggle visibility * */ toggle(e) { - var v = this.model.get('open') ? 0 : 1; - this.model.set('open', v); - }, + const { model } = this; + const v = model.get('open') ? 0 : 1; + model.set('open', v); + } render() { const { pfx, model, em, $el } = this; @@ -88,19 +94,20 @@ export default Backbone.View.extend({ $el.attr('class', `${pfx}sector ${pfx}sector__${id} no-select`); this.updateOpen(); return this; - }, + } renderProperties() { - var objs = this.model.get('properties'); + const { model, target, propTarget, config } = this; + const objs = model.get('properties'); if (objs) { - var view = new PropertiesView({ + const view = new PropertiesView({ collection: objs, - target: this.target, - propTarget: this.propTarget, - config: this.config + target, + propTarget, + config }); this.$el.append(view.render().el); } } -}); +}