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;
-    this.tmpl =
-      '<div class="' +
-      this.fieldClass +
-      '"><div class="' +
-      this.inputhClass +
-      '"></div>' +
-      '<div class="' +
-      ppfx +
-      'sel-arrow"><div class="' +
-      ppfx +
-      'd-s-arrow"></div></div> </div>';
+    const { ppfx, inputhClass, fieldClass, model } = this;
+    this.listenTo(model, 'change:options', this.render);
+    this.tmpl = `<div class="${fieldClass}">
+      <div class="${inputhClass}"></div>
+      <div class="${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;
-      var opts = md.get('options') || [];
-      var input = '<select>';
-
-      if (opts.length) {
-        _.each(opts, el => {
-          var name, value, style;
-          var attrs = '';
-          if (typeof el === 'string') {
-            name = el;
-            value = el;
-          } else {
-            name = el.name ? el.name : el.value;
-            value = el.value.replace(/"/g, '&quot;');
-            style = el.style ? el.style.replace(/"/g, '&quot;') : '';
-            attrs += style ? 'style="' + style + '"' : '';
-          }
-          input +=
-            '<option value="' + value + '" ' + attrs + '>' + name + '</option>';
-        });
-      }
+      const { model } = this;
+      const opts = model.get('options') || [];
+      let input = '<select>';
+
+      opts.forEach(el => {
+        let attrs = '';
+        let name, value, style;
+
+        if (isString(el)) {
+          name = el;
+          value = el;
+        } else {
+          name = el.name ? el.name : el.value;
+          value = `${el.value || el.id}`.replace(/"/g, '&quot;');
+          style = el.style ? el.style.replace(/"/g, '&quot;') : '';
+          attrs += style ? ` style="${style}"` : '';
+        }
+
+        input += `<option value="${value}"${attrs}>${name}</option>`;
+      });
 
       input += '</select>';
       this.input = input;
-      this.$input = $(this.input);
-
-      var target = this.target;
-      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);
+      this.$input = $(input);
+      let val = model.get('value') || model.getTargetValue();
+      !isUndefined(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;