Improve select view update

backbone.stickit.js

@@ -207,6 +207,18 @@
   // -------
 
   var slice = [].slice;
+  var STICKIT_BINDVAL_KEY = 'stickit-bind-val';
+
+  // Returns value of select option
+  // First checks for containing custom values, e.g not string
+  // If such exists, then return it. If not, fallback to simple node.value
+  var getSelectOptionValue = function(el) {
+    if (el.__stickitBindVal__) {
+      return Backbone.$(el).data(STICKIT_BINDVAL_KEY);
+    } else {
+      return el.value;
+    }
+  };
 
   // Evaluates the given `path` (in object/dot-notation) relative to the given
   // `obj`. If the path is null/undefined, then the given `obj` is returned.
@@ -501,34 +513,54 @@
       // If there are no `selectOptions` then we assume that the `<select>`
       // is pre-rendered and that we need to generate the collection.
       if (!selectConfig) {
-        selectConfig = {};
-        var getList = function($el) {
-          return $el.map(function(index, option) {
-            // Retrieve the text and value of the option, preferring "stickit-bind-val"
-            // data attribute over value property.
-            var dataVal = Backbone.$(option).data('stickit-bind-val');
-            return {
-              value: dataVal !== undefined ? dataVal : option.value,
-              label: option.text
-            };
-          }).get();
+        // simple way
+        $el.val(val);
+        return;
+
+        // I do not know if it is possible that this method might be invoked
+        // each time with different params. I |selectConfig| might be present
+        // in future calls after one call with it,
+        // then next code should be enable
+
+        // I left it here so you can check. If that case is not possible
+        // then I will remove this code. If it's possible, then I will enable it
+
+        var check = function(val) {
+          return _.isArray(val) || _.isObject(val);
         };
-        if ($el.find('optgroup').length) {
-          list = {opt_labels:[]};
-          // Search for options without optgroup
-          if ($el.find('> option').length) {
-            list.opt_labels.push(undefined);
-            _.each($el.find('> option'), function(el) {
-              list[undefined] = getList(Backbone.$(el));
+
+        if (isMultiple && _.isArray(val)) {
+          var hasCustomValue = _.some(val, check);
+        } else {
+          var hasCustomValue = check(val);
+        }
+
+        if (hasCustomValue) {
+          $el.prop('selectedIndex', -1);
+
+          if (isMultiple) {
+            $el.find('option').each(function() {
+              var optionVal = getSelectOptionValue(this);
+              var self = this;
+
+              _.each(val, function(deepVal) {
+                if (_.isEqual(optionVal, deepVal)) {
+                  $(self).prop('selected', true);
+                }
+              });
+            });
+          } else {
+            $el.find('option').each(function() {
+              var optionVal = getSelectOptionValue(this);
+
+              if (_.isEqual(optionVal, val)) {
+                $(this).prop('selected', true);
+                return false;
+              }
             });
           }
-          _.each($el.find('optgroup'), function(el) {
-            var label = Backbone.$(el).attr('label');
-            list.opt_labels.push(label);
-            list[label] = getList(Backbone.$(el).find('option'));
-          });
         } else {
-          list = getList($el.find('option'));
+          $el.val(val);
         }
       }
 
@@ -538,15 +570,22 @@
       selectConfig.disabledPath = selectConfig.disabledPath || 'disabled';
 
       var addSelectOptions = function(optList, $el, fieldVal) {
+        var fragment = document.createDocumentFragment();
+
         _.each(optList, function(obj) {
           var option = Backbone.$('<option/>'), optionVal = obj;
 
           var fillOption = function(text, val, disabled) {
             option.text(text);
             optionVal = val;
-            // Save the option value as data so that we can reference it later.
-            option.data('stickit-bind-val', optionVal);
-            if (!_.isArray(optionVal) && !_.isObject(optionVal)) option.val(optionVal);
+
+            if (!_.isArray(optionVal) && !_.isObject(optionVal)) {
+              option.val(optionVal);
+            } else {
+              // Save the option value as data so that we can reference it later.
+              option[0].__stickitBindVal__ = true;
+              option.data(STICKIT_BINDVAL_KEY, optionVal);
+            }
 
             if (disabled === true) option.prop('disabled', 'disabled');
           };
@@ -583,8 +622,10 @@
             });
           }
 
-          $el.append(option);
+          option.appendTo(fragment);
         });
+
+        $el.append(fragment);
       };
 
       $el.find('*').remove();
@@ -679,10 +720,10 @@
 
       if ($el.prop('multiple')) {
         return _.map(selected, function(el) {
-          return Backbone.$(el).data('stickit-bind-val');
+          return getSelectOptionValue(el);
         });
       } else {
-        return selected.data('stickit-bind-val');
+        return getSelectOptionValue(selected[0]);
       }
     }
   }]);