Программирование функции обратного вызова в плагине jQuery

Question

Я пишу плагин jQuery, чтобы я мог повторно использовать этот код во многих местах, так как это очень хорошо используемый фрагмент кода, сам код добавляет новую строку в таблицу, которая была клонирована из скрытой строки, и продолжает выполнить множество манипуляций на новом ряду.

Я в настоящее время ссылаюсь на это так:

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

Но я хочу включить функцию обратного вызова, чтобы каждая область, из которой вызывается плагин, могла сделать что-то более уникальное, когда строка была добавлена. Я использовал плагин JQuery AJAX раньше, поэтому использовал success функция обратного вызова, но не может понять, как работает код в фоновом режиме. Вот чего я хочу добиться:

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

Вот мой код плагина

(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);

Я обычно проводил поиск на elgooG... но я, кажется, получаю много шума с небольшим результатом, любая помощь будет принята с благодарностью.

Спасибо!

Answer 1

Может как то так?

$.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();
   }
});

Назовите это примерно так:

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

РЕДАКТИРОВАТЬ: я просто добавил обратные вызовы по умолчанию, чтобы вам не нужно проверять наличие обратных вызовов. Лично мне нравится просто проверять существование, прежде чем звонить им, но вы можете предпочесть этот маршрут.

Answer 2

Юо может прочитать этот пост:

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

который содержит пункт о предоставлении возможностей обратного вызова...

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);
}