Programmation d'une fonction de rappel dans un plugin jQuery

Question

J'écris un plug-in jQuery pour pouvoir réutiliser ce code dans beaucoup d'endroits car c'est un morceau de code très bien utilisé, le code lui-même ajoute une nouvelle ligne à une table qui a été cloné à partir d'une rangée cachée, il continue à effectuer une charge de manipulations sur la nouvelle rangée.

Je fais référence actuellement comme ceci:

$(".abc .grid").grid(); 

Mais je veux inclure un rappel de sorte que chaque zone le plug-in est appelé à partir peut faire quelque chose d'un peu plus unique lorsque la ligne a été ajoutée . J'ai déjà utilisé le plug-in jQuery AJAX, donc j'ai utilisé la fonction de rappel success, mais je ne comprends pas comment le code fonctionne en arrière-plan. Voici ce que je veux atteindre:

$(".abc .grid").grid({ 
    row_added: function() { 
     // do something a bit more specific here 
    } 
}); 

Voici mon plug-in Code

(function($){   

    $.fn.extend({ 

     //pass the options variable to the function 
     grid: function() { 

      return this.each(function() { 

       grid_table=$(this).find('.grid-table > tbody'); 
       grid_hidden_row=$(this).find('.grid-hidden-row'); 
       //console.debug(grid_hidden_row); 
       $(this).find('.grid-add-row').click(function(event) { 
       /* 
       * clone row takes a hidden dummy row, clones it and appends a unique row 
       * identifier to the id. Clone maintains our jQuery binds 
       */ 

        // get the last id 
        last_row=$(grid_table).find('tr:last').attr('id'); 
        if(last_row===undefined) { 
         new_row=1; 
        } else { 
         new_row=parseInt(last_row.replace('row',''),10)+1; 
        } 

        // append element to target, changes it's id and shows it 
        $(grid_table).append($(grid_hidden_row).clone(true).attr('id','row'+new_row).removeClass('grid-hidden-row').show()); 

        // append unique row identifier on id and name attribute of seledct, input and a 
        $('#row'+new_row).find('select, input, a').each(function(id) { 
         $(this).appendAttr('id','_row'+new_row); 
         $(this).replaceAttr('name','_REPLACE_',new_row); 
        }); 

        // disable all the readonly_if_lines options if this is the first row 
        if(new_row==1) { 
         $('.readonly_if_lines :not(:selected)').attr('disabled','disabled'); 
        } 
       }); 

       $(this).find('.grid-remove-row').click(function(event) { 
       /* 
       * Remove row does what it says on the tin, as well as a few other house 
       * keeping bits and pieces 
       */ 

        // remove the parent tr 
        $(this).parents('tr').remove(); 

        // recalculate the order value5 
        //calcTotal('.net_value ','#gridform','#gridform_total'); 

        // if we've removed the last row remove readonly locks 
        row_count=grid_table.find('tr').size(); 
        console.info(row_count); 
        if(row_count===0) { 
         $('.readonly_if_lines :disabled').removeAttr('disabled'); 
        } 

       }); 

      }); 

     } 

    }); 

})(jQuery); 

Je l'ai fait la recherche habituellement elgoog ... mais il me semble se faire beaucoup de bruit avec petit résultat, toute aide serait grandement appréciée.

Merci!

Answer 1

Peut-être que quelque chose comme ça?

$.fn.extend({ 

    //pass the options variable to the function 
    grid: function(callbacks) { 

     // The following can be used so you don't need 
     // to test for callback existence in the rest 
     // of the plugin 
     var defaults = { 
      before: function() {}, 
      after: function() {}, 
      row_added: function() {}     
     } 
     callbacks = $.extend({},defaults,callbacks); 

     // perform callback 
     if (callbacks.before) 
      callbacks.before(); 

     return this.each(function() { 
      // do stuff 
      if (callbacks.row_added) 
       callbacks.row_added(); 
      // do more stuff 
     } 

     // perform callback 
     if (callbacks.after) 
      callbacks.after(); 
    } 
}); 

appel avec quelque chose comme ceci:

$("#grid").grid({ 
    before: function() {}, 
    after: function() {}, 
    row_added: function() {} 
});                

EDIT: Je viens d'ajouter callbacks par défaut afin que vous ne avez pas besoin de vérifier l'existence des callbacks. Personnellement, j'aime juste tester l'existence avant de les appeler, mais vous pourriez préférer cette route.

Answer 2

Yuo peut lire ce message:

http://www.learningjquery.com/2009/03/making-a-jquery-plugin-truly-customizable

qui contient un paragraphe sur la fourniture de capacités de rappel ...

var defaults = { 

    onImageShow : function(){}, // we define an empty anonymous function 
           // so that we don't need to check its 
           // existence before calling it. 
    // ... rest of settings ... 
}; 

// Later on in the plugin:  
$nextButton.bind('click', showNextImage); 

function showNextImage() { 
    // DO stuff to show the image here... 
    // ... 
    // Here's the callback: 
    settings.onImageShow.call(this); 
}