Listview: Autodividers: Converting to extension.

Author: Gabriel Schulhof

js/widgets/listview.autodividers.js

@@ -6,8 +6,7 @@ define( [ "jquery", "./listview" ], function( jQuery ) {
 //>>excludeEnd("jqmBuildExclude");
 (function( $, undefined ) {
 
-$.mobile.listview.prototype.options.autodividers = false;
-$.mobile.listview.prototype.options.autodividersSelector = function( elt ) {
+function defaultAutodividersSelector( elt ) {
 	// look for the text in the given element
 	var text = $.trim( elt.text() ) || null;
 
@@ -19,26 +18,34 @@ $.mobile.listview.prototype.options.autodividersSelector = function( elt ) {
 	text = text.slice( 0, 1 ).toUpperCase();
 
 	return text;
-};
+}
 
-$.mobile.document.delegate( "ul,ol", "listviewcreate", function() {
+$.widget( "mobile.listview", $.mobile.listview, {
+	options: {
+		autodividers: false,
+		autodividersSelector: defaultAutodividersSelector
+	},
 
-	var list = $( this ),
-			listview = list.data( "mobile-listview" );
+	_afterListviewRefresh: function() {
+		var el = this.element;
+		this._off( el, "listviewafterrefresh" );
+		this._replaceDividers();
+		this.refresh();
+		this._on( el, { listviewafterrefresh: "_afterListviewRefresh" } );
+	},
 
-	if ( !listview || !listview.options.autodividers ) {
-		return;
-	}
+	_replaceDividers: function() {
+		var i, lis, li, dividerText,
+			lastDividerText = null,
+			list = this.element;
 
-	var replaceDividers = function () {
 		list.find( "li:jqmData(role='list-divider')" ).remove();
 
-		var lis = list.find( 'li' ),
-			lastDividerText = null, li, dividerText;
+		lis = list.find( 'li' );
 
-		for ( var i = 0; i < lis.length ; i++ ) {
-			li = lis[i];
-			dividerText = listview.options.autodividersSelector( $( li ) );
+		for ( i = 0; i < lis.length ; i++ ) {
+			li = lis[ i ];
+			dividerText = this.options.autodividersSelector( $( li ) );
 
 			if ( dividerText && lastDividerText !== dividerText ) {
 				var divider = document.createElement( 'li' );
@@ -49,16 +56,17 @@ $.mobile.document.delegate( "ul,ol", "listviewcreate", function() {
 
 			lastDividerText = dividerText;
 		}
-	};
+	},
+
+	_create: function() {
+		this._super();
 
-	var afterListviewRefresh = function () {
-		list.unbind( 'listviewafterrefresh', afterListviewRefresh );
-		replaceDividers();
-		listview.refresh();
-		list.bind( 'listviewafterrefresh', afterListviewRefresh );
-	};
+		if ( !this.options.autodividers ) {
+			return;
+		}
 
-	afterListviewRefresh();
+		this._afterListviewRefresh();
+	}
 });
 
 })( jQuery );