Remove _.template from SectorView

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(`
-  <div class="<%= pfx %>title" data-sector-title>
-    <i id="<%= pfx %>caret" class="fa"></i>
-    <%= label %>
-  </div>`),
+export default class SectorView extends View {
+  template({ pfx, label }) {
+    return html`
+      <div class="${pfx}title" data-sector-title>
+        <i id="${pfx}caret" class="fa"></i>
+        ${label}
+      </div>
+    `;
+  }
 
-  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);
     }
   }
-});
+}