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

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

6 голосов
/ 28 мая 2010

Я пишу плагин 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 ... но я, кажется, получаю много шума с небольшим результатом, любая помощь будет принята с благодарностью.

Спасибо!

Ответы [ 2 ]

9 голосов
/ 28 мая 2010

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

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

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

2 голосов
/ 28 мая 2010

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

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