jquery/jquery mobile plugin - widget - calling private method doesn't work

Question

I'm trying to call the private method _scrollMe from within my plugin, but I keep getting an error that it's not a function.

Can somebody tell me what I'm doing wrong? Thanks!

    (function( $, window, undefined ){
      $.widget( "mobile.multiview", $.mobile.widget, {        
        _create: function() {
           this._morph();
           },
        _morph: function() {
           $('div[data-role="page"]').live('pagebeforeshow.scroll', function(event){
               var $page = $(this);
               if ( $page.data('scrollable', 'Off') ) {
                   $page._scrollMe(); // this doesn't fire 
                   }
             });
           },
       _scrollMe: function () {
           alert ("scrollMe");
           }
    }); 

// initialize
$( document ).bind( "pagecreate", function( ) {
       $(document).multiview();
       });  

})(jQuery,window);

Answer 1

You're trying to access the private method using the wrong syntax - using $page.method is trying to call it as a public method.

Changing it to this._scrollMe should work.

Answer 2

I don't think 'this' is what you expect it to be in that event callback.

Try moving the $page variable outside the function.

var $page = $(this);
$('div[data-role="page"]').live('pagebeforeshow.scroll', function(event){

and maybe this instead:

var $page = this;

// Edit //

_morph: function() {
    var page = this;
    $('div[data-role="page"]').live('pagebeforeshow.scroll', function(event) {
        if($page.data('scrollable', 'Off') ) {
            $page._scrollMe(); // this doesn't fire 
        }
     });
},