简体   繁体   中英

How to use JQuery Proxy with the JQuery Boilerplate

I am currently in the process of writing a plugin using the JQuery Boilerplate. However I am having issues calling functions that are not called within the init() function. The boilerplate comments state that functions can be called via this.functionname() from within the init function but I'm unsure how to do this if they're called from elsewhere.

From looking at other questions on here it looks like I can use JQuery Proxy for this but can see no example of how to apply this to the boilerplate. Could someone show me, for instance how I could call this.createCarousel() or this.settings from within onEnterMobile please:

;(function ( $, window, document, undefined ) {

    // Create the defaults once
    var pluginName = "dcResponsiveCarousel",
        defaults = {
            itemsPerPageOnMobile: 1,
            itemsPerPageOnTablet: 2,
            itemsPerPageOnDesktop: 3
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;
        $element = $(element);
        this.settings = $.extend( {}, defaults, options) ;
        this._defaults = defaults;
        this._name = pluginName;
        this.init();

    }

    Plugin.prototype = {

            init: function() {
                enquire
                .register("screen and (max-width:767px)", this.onEnterMobile)
                .register("screen and (min-width:768px) and (max-width:991px)", this.onEnterTablet)
                .register("screen and (min-width:992px)", this.onEnterDesktop)         
            },

            onEnterMobile: function (){
                var deviceType = "mobile";
                console.log(deviceType);
                //this.createCarousel($element, itemsPerPage, deviceType);

            }
        }
    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName,
                new Plugin( this, options ));
            }
        });
    };

    })( jQuery, window, document );

OK after seeking some offline help on this issue I thought I'd post up an example of how JQuery Proxy can be used within JQuery Boilerplate:

    init: function() {
        var that = this;
        enquire
        .register("screen and (max-width:767px)", $.proxy(this.onEnterMobile,this))
        .register("screen and (min-width:768px) and (max-width:991px)", $.proxy(this.onEnterTablet,this))
        .register("screen and (min-width:992px)", $.proxy(this.onEnterDesktop,this))
    },

So rather than just calling my callback function this.onEnterMobile I'm calling that function from within another "proxy" function which then allows me to pass through the value of the "this" keyword. This allows me to access my settings from any function in the plugin using this.settings or call any other function using this.functionName

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM