Update events in ClassTagView

src/selector_manager/view/ClassTagView.js

@@ -1,13 +1,22 @@
 var Backbone = require('backbone');
 const Selector = require('./../model/Selector');
+const inputProp = 'readOnly';
 
 module.exports = Backbone.View.extend({
   template: _.template(`
-  <span id="<%= pfx %>checkbox" class="fa"></span>
+  <span id="<%= pfx %>checkbox" class="fa" data-tag-status></span>
   <span id="<%= pfx %>tag-label">
-      <input class="<%= ppfx %>no-app" value="<%= label %>" <%= inputProp %>/>
+      <input class="<%= ppfx %>no-app" value="<%= label %>" <%= inputProp %> data-tag-name>
   </span>
-  <span id="<%= pfx %>close">&Cross;</span>`),
+  <span id="<%= pfx %>close" data-tag-remove>&Cross;</span>`),
+
+  events: {
+    'click [data-tag-remove]': 'removeTag',
+    'click [data-tag-status]': 'changeStatus',
+    'dblclick [data-tag-name]': 'startEditTag',
+    'keypress [data-tag-name]': 'updateInputLabel',
+    'focusout [data-tag-name]': 'endEditTag',
+  },
 
   initialize(o) {
     this.config = o.config || {};
@@ -16,48 +25,53 @@ module.exports = Backbone.View.extend({
     this.ppfx = this.config.pStylePrefix || '';
     this.inputProp = 'readonly';
     this.target = this.config.em;
-    this.closeId = this.pfx + 'close';
-    this.chkId = this.pfx + 'checkbox';
-    this.labelId = this.pfx + 'tag-label';
-    this.events = {};
-    this.events['click #' + this.closeId ] = 'removeTag';
-    this.events['click #' + this.chkId ] = 'changeStatus';
-    this.events['dblclick #' + this.labelId ] = 'startEditTag';
-    this.events['keypress #' + this.labelId + ' input'] = 'updateInputLabel';
-    this.events['blur #' + this.labelId + ' input'] = 'endEditTag';
-
-    this.listenTo( this.model, 'change:active', this.updateStatus);
-    this.delegateEvents();
+    this.listenTo(this.model, 'change:active', this.updateStatus);
+  },
+
+
+  /**
+   * Returns the element which containes the anme of the tag
+   * @return {HTMLElement}
+   */
+  getInputEl() {
+    if (!this.inputEl) {
+      this.inputEl = this.el.querySelector('[data-tag-name]');
+    }
+
+    return this.inputEl;
   },
 
+
   /**
    * Start editing tag
    * @private
    */
   startEditTag() {
-    this.$labelInput.prop(this.inputProp, false);
+    this.getInputEl()[inputProp] = false;
   },
 
+
   /**
    * End editing tag. If the class typed already exists the
    * old one will be restored otherwise will be changed
    * @private
    */
   endEditTag() {
-    var value = this.$labelInput.val();
-    var next = Selector.escapeName(value);
-
-    if(this.target){
-      var clsm = this.target.get('SelectorManager');
-
-      if(clsm){
-        if(clsm.get(next))
-          this.$labelInput.val(this.model.get('label'));
-        else
-          this.model.set({ name: next, label: value});
+    const model = this.model;
+    const inputEl = this.getInputEl();
+    const label = inputEl.value;
+    const name = Selector.escapeName(label);
+    const em = this.target;
+    const sm = em && em.get('SelectorManager');
+    inputEl[inputProp] = true;
+
+    if (sm) {
+      if (sm.get(name)) {
+        inputEl.value = model.get('label');
+      } else {
+        model.set({ name, label });
       }
     }
-    this.$labelInput.prop(this.inputProp, true);
   },
 
   /**
@@ -69,6 +83,7 @@ module.exports = Backbone.View.extend({
     this.target.trigger('targetClassUpdated');
   },
 
+
   /**
    * Remove tag from the selected component
    * @param {Object} e