powmedia / backbone-forms

Form framework for BackboneJS with nested forms, editable lists and validation
MIT License
2.17k stars 415 forks source link

Select._getOptionsHtml/arrayToHTML is very slow #525

Open smarinier opened 7 years ago

smarinier commented 7 years ago

When you get a huge amount of options, the time spent in these methos can reach 30s for 1500 items. The main trouble is due to html = html.add( $()) The array of object is destroyed/rebuit on each iteration.

Here's my fix proposal, make only one big add at the end:

Backbone.Form.editors.Select.prototype._arrayToHtml= function(array) {
    var html = [];

    //Generate HTML
    _.each(array, function(option) {
      if (_.isObject(option)) {
        if (option.group) {
          var optgroup = $j("<optgroup>")
            .attr("label",option.group)
            .html( this._getOptionsHtml(option.options) );
          html[html.length] = optgroup[0];
        } else {
          var val = (option.val || option.val === 0) ? option.val : '';
          html[html.length] = $j('<option>').val(val).text(option.label)[0];
        }
      }
      else {
        html[html.length] = $j('<option>').text(option)[0];
      }
    }, this);

    return $j().add( html);
  };