jQuery-动态链接方法

时间:2018-06-30 07:45:19

标签: javascript jquery html dom jquery.repeater

我有如下代码块:

var repeater_item = $('#repeater-item').repeater({
    show: function () {
        var this_elem = $(this);
        this_elem.slideDown();

        // this_elem.find('.select2-container').remove();
        // this_elem.find('.select2-repeater-control').select2();
        // this_elem.find('.select2-container').css('width','100%');
        // this_elem.find('.form-control').prop('required', true);
    },
    hide: function (remove) {
        var this_elem = $(this);
        if(confirm('Are you sure, you want to delete the row?')) {
            this_elem.slideUp(remove);
        }
    }
});

// Set data on edit mode
if( typeof editData !== 'undefined' ) {
    repeater_item.setList( eval(editData) );
}

对于DOM上的每个字段,我需要重复代码块。因此,我决定使其具有以下功能:

var _repeat = function( element, data ) {

    var repeater_item = $(element).repeater({
        show: function () {
            var this_elem = $(this);
            this_elem.slideDown();

            // QUESTION IS HERE <-------------
        },
        hide: function (remove) {
            var this_elem = $(this);
            if(confirm('Are you sure, you want to delete the row?')) {
                this_elem.slideUp(remove);
            }
        }
    });

    // Set data on edit mode
    if( typeof data !== 'undefined' ) {
        repeater_item.setList( eval(data) );
    }

};

// usage
_repeat( '#repeater-item', the_data );
_repeat( '#repeater-item-2', the_data_2 );

一切正常。

问题是,如果我 repeat 代码块,当在每个重复的块中调用show方法时,我可以做我想做的任何事情。但是当我使用通用功能时,我无法做到这一点。

所以我传递了另一个如下参数:

var _repeat = function( element, data, onShow ) {
    // ...other code
    show: function () {
        var this_elem = $(this);
        this_elem.slideDown();

        $.each(onShow, function( key, the_value ) {
            this_elem.find(key).the_value; // <----------- HERE
        });
        // this_elem.find('.form-control').prop('required', true); // <--- BUT THIS ONE WORKS

    }
    // ...other code
};

// usage
onShow = {
    '.form-control' : "prop('required', true)"
};
_repeat( '#repeater-item', the_data, onShow );

但是实际上不起作用。

请注意第一个代码块,在实际情况下我可能需要执行哪些类型的操作。如果要使用此功能执行类似操作,该如何继续?

如何动态链接某些方法?

0 个答案:

没有答案