Refactor TraitSelectVIew and listen options changes

src/trait_manager/view/TraitSelectView.js

@@ -1,21 +1,18 @@
+import { isString, isUndefined } from 'underscore';
 const TraitView = require('./TraitView');
 const $ = require('backbone').$;
 
 module.exports = TraitView.extend({
   initialize(o) {
     TraitView.prototype.initialize.apply(this, arguments);
-    var ppfx = this.ppfx;
+    const { ppfx, inputhClass, fieldClass, model } = this;
-    this.tmpl =
+    this.listenTo(model, 'change:options', this.render);
-      '<div class="' +
+    this.tmpl = `<div class="${fieldClass}">
-      this.fieldClass +
+      <div class="${inputhClass}"></div>
-      '"><div class="' +
+      <div class="${ppfx}sel-arrow">
-      this.inputhClass +
+        <div class="${ppfx}d-s-arrow"></div>
-      '"></div>' +
+      </div>
-      '<div class="' +
+    </div>`;
-      ppfx +
-      'sel-arrow"><div class="' +
-      ppfx +
-      'd-s-arrow"></div></div> </div>';
   },
 
   /**
@@ -25,44 +22,32 @@ module.exports = TraitView.extend({
    */
   getInputEl() {
     if (!this.$input) {
-      var md = this.model;
+      const { model } = this;
-      var opts = md.get('options') || [];
+      const opts = model.get('options') || [];
-      var input = '<select>';
+      let input = '<select>';
-
+
-      if (opts.length) {
+      opts.forEach(el => {
-        _.each(opts, el => {
+        let attrs = '';
-          var name, value, style;
+        let name, value, style;
-          var attrs = '';
+
-          if (typeof el === 'string') {
+        if (isString(el)) {
-            name = el;
+          name = el;
-            value = el;
+          value = el;
-          } else {
+        } else {
-            name = el.name ? el.name : el.value;
+          name = el.name ? el.name : el.value;
-            value = el.value.replace(/"/g, '&quot;');
+          value = `${el.value || el.id}`.replace(/"/g, '&quot;');
-            style = el.style ? el.style.replace(/"/g, '&quot;') : '';
+          style = el.style ? el.style.replace(/"/g, '&quot;') : '';
-            attrs += style ? 'style="' + style + '"' : '';
+          attrs += style ? ` style="${style}"` : '';
-          }
+        }
-          input +=
+
-            '<option value="' + value + '" ' + attrs + '>' + name + '</option>';
+        input += `<option value="${value}"${attrs}>${name}</option>`;
-        });
+      });
-      }
 
       input += '</select>';
       this.input = input;
-      this.$input = $(this.input);
+      this.$input = $(input);
-
+      let val = model.get('value') || model.getTargetValue();
-      var target = this.target;
+      !isUndefined(val) && this.$input.val(val);
-      var name = md.get('name');
-      var val = md.get('value');
-
-      if (md.get('changeProp')) {
-        val = val || target.get(name);
-      } else {
-        var attrs = target.get('attributes');
-        val = attrs[name];
-      }
-
-      if (val) this.$input.val(val);
     }
 
     return this.$input.get(0);

src/trait_manager/view/TraitView.js

@@ -156,6 +156,7 @@ module.exports = Backbone.View.extend({
   },
 
   render() {
+    this.$input = null;
     this.renderLabel();
     this.renderField();
     this.el.className = this.className;