Override BackBone attachment.Compat save function & bind select2

upload-media.js

jQuery(document).ready(function($){

wp.media.view.AttachmentCompat.prototype.save = function( event ) {
		var data = {};

		if ( event ) {
			event.preventDefault();
		}

_.each( this.$el.serializeArray(), function( pair ) {

    // if the pair.name is greater than 2 chars and [] is the last two chars 
	if ( pair.name.length > 2 && '[]' == pair.name.substr( pair.name.length - 2 ) ) { 
	
							// defined item as the name minus the [] 
		                    var item = pair.name.substr( 0, pair.name.length - 2 ); 
		                 	//if item wasn't passed previously in data
		                     if ( item in data ) { 
		                     		  // combine all of the pair.value together to one data[item] comma separated
		                              var list =  data[ item ] += ',' + pair.value; 
		                              
		                              // split the list into a javascript object 
		                              data[ item ] = list.split(',');
		                              
		                          
		                     /* if it is the first time sending for 'item' just add once   
		                      * storing even single records as an array only for inputs that have name="somename[]" 
		                      */
		                          } else { 
		                                var list = pair.value; 
		                                data[ item ] = list.split(',');
		                          } // end  if ( item in data )
		     
		     //else if name does not end in []                      
		    } else { 
		         // send the value only 
		         data[ pair.name ] = pair.value; 
		   }     
		                                
     }); 

		this.controller.trigger( 'attachment:compat:waiting', ['waiting'] );
		this.model.saveCompat( data ).always( _.bind( this.postSave, this ) );
		
	}
	    
}); 


/* 
 * Test Javascript with just simple background color change
 * The .colorButton link does not work after the first field is submitted
 */
jQuery(document).on('click', '.colorButton', function(event) {
var input = jQuery('input');
 input.css('background-color' , 'red');
});

/* 
 * Binds Select2 to my input field to change the markup and use ajax to send data
 * the first .on() is to re-bind the fields when you switch between modal views and/or launch the modal 
 */
jQuery(document).on( 'click', '.triggerBtn, .select2-container .js--select-attachment, .media-menu a, .attachments-browser .attachment', function( event ) {
jQuery("#ee").select2({
    placeholder: "Search for a repository",
    minimumInputLength: 1,
    multiple:true,
       id: function(item){return item.data.ID},
       text: function(item){return item.data.user_login},
	
        ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
        url: 'http://73.4.131.105/gdiary/wp-admin/admin-ajax.php',
        dataType: 'json',
        quietMillis: 250,
        data: function (termContainer, page) {
        
            return {
                search:termContainer.term, // search term
                action: 'getUsers'
            };
        },
          processResults:
           
           function (data) {
       
           
                           // you should map the id and text attributes on version 4.0
                           var select2Data = jQuery.map(data.results, function (obj) {
                           
                               //obj.id = obj.id.ID;
                              // obj.text = obj.display_name;
                             // console.log(obj);
                               return obj;
                   
                         
                           });
                               // console.log(select2Data);
                                           
                           return {
                               results: select2Data,
                             
                           }; 
                   
               },
        cache: true
    },

   
    templateResult: formatRepo,
   // templateSelection: repoFormatSelection,
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
  
});
function formatRepo (data) {
    if (data.loading) return data.results;

    var markup = 
    '<div class="avatar">' +
    data.avatar +
    '</div>' +
    '<div class="info">' +
   
    '<div class="col-sm-6">' + data.text + '</div>' +
    '<div class="col-sm-3"><i class="fa fa-code-fork"></i> '
    ;


    markup += '</div></div>';

    return markup;
  }
  
function repoFormatResult(repo) {
    var markup =  repo.data.user_login;

      return markup;
   }

});