Remove _.template from DevicesView

src/device_manager/view/DevicesView.js

@@ -1,22 +1,27 @@
-import { template } from 'underscore';
-import Backbone from 'backbone';
+import { View } from 'backbone';
+import html from 'utils/html';
 
-export default Backbone.View.extend({
-  template: template(`
-    <div class="<%= ppfx %>device-label"><%= deviceLabel %></div>
-    <div class="<%= ppfx %>field <%= ppfx %>select">
-      <span id="<%= ppfx %>input-holder">
-        <select class="<%= ppfx %>devices"></select>
-      </span>
-      <div class="<%= ppfx %>sel-arrow">
-        <div class="<%= ppfx %>d-s-arrow"></div>
+export default class DevicesView extends View {
+  template({ ppfx, label }) {
+    return html`
+      <div class="${ppfx}device-label">${label}</div>
+      <div class="${ppfx}field ${ppfx}select">
+        <span id="${ppfx}input-holder">
+          <select class="${ppfx}devices"></select>
+        </span>
+        <div class="${ppfx}sel-arrow">
+          <div class="${ppfx}d-s-arrow"></div>
+        </div>
       </div>
-    </div>
-    <button style="display:none" class="<%= ppfx %>add-trasp">+</button>`),
+      <button style="display:none" class="${ppfx}add-trasp">+</button>
+    `;
+  }
 
-  events: {
-    change: 'updateDevice'
-  },
+  events() {
+    return {
+      change: 'updateDevice'
+    };
+  }
 
   initialize(o) {
     this.config = o.config || {};
@@ -25,14 +30,14 @@ export default Backbone.View.extend({
     this.events['click .' + this.ppfx + 'add-trasp'] = this.startAdd;
     this.listenTo(this.em, 'change:device', this.updateSelect);
     this.delegateEvents();
-  },
+  }
 
   /**
    * Start adding new device
    * @return {[type]} [description]
    * @private
    */
-  startAdd() {},
+  startAdd() {}
 
   /**
    * Update device of the editor
@@ -45,7 +50,7 @@ export default Backbone.View.extend({
       var val = devEl ? devEl.val() : '';
       em.set('device', val);
     }
-  },
+  }
 
   /**
    * Update select value on device update
@@ -59,7 +64,7 @@ export default Backbone.View.extend({
       var name = device ? device.get('name') : '';
       devEl.val(name);
     }
-  },
+  }
 
   /**
    * Return devices options
@@ -77,19 +82,15 @@ export default Backbone.View.extend({
     });
 
     return result;
-  },
+  }
 
   render() {
     const { em, ppfx, $el, el } = this;
-    $el.html(
-      this.template({
-        ppfx,
-        deviceLabel: em && em.t && em.t('deviceManager.device')
-      })
-    );
+    const label = em && em.t && em.t('deviceManager.device');
+    $el.html(this.template({ ppfx, label }));
     this.devicesEl = $el.find(`.${ppfx}devices`);
     this.devicesEl.append(this.getOptions());
     el.className = `${ppfx}devices-c`;
     return this;
   }
-});
+}