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);
}
}
-});
+}