Listview: Correctly update icon at runtime

Fixes jquery-archivegh-8334

Author: Gabriel Schulhof

js/widgets/listview.js

@@ -149,9 +149,8 @@ return $.widget( "mobile.listview", $.extend( {
 		var buttonClass, pos, numli, item, itemClass, itemExtraClass, itemTheme, itemIcon, icon, a,
 			isDivider, startCount, newStartCount, value, last, splittheme, splitThemeClass, li, ol,
 			altButtonClass, dividerTheme, start, itemClassDict, dictionaryKey, span, spliticon,
-			allItems,
+			allItems, newSpan,
 			currentOptions = this.options,
-			createEnhanced = create && this.options.enhanced,
 			list = this.element;
 
 		ol = !!$.nodeName( list[ 0 ], "ol" );
@@ -204,25 +203,38 @@ return $.widget( "mobile.listview", $.extend( {
 							getAttribute( item[ 0 ], "icon" ) || currentOptions.splitIcon;
 						altButtonClass = "ui-button ui-button-icon-only" + splitThemeClass;
 
-						span = createEnhanced ? last.children( ".ui-listview-item-split-icon" ) :
-							$( "<span>" );
+						newSpan = false;
+						span = last.children( ".ui-listview-item-split-icon" );
+						if ( !span.length ) {
+							span = $( "<span>" );
+							newSpan = true;
+						}
+
 						addItemToDictionary( itemClassDict, span[ 0 ],
 							"ui-listview-item-split-icon", "ui-icon ui-icon-" + spliticon );
 						addItemToDictionary( itemClassDict, last[ 0 ],
 							"ui-listview-item-split-button", altButtonClass );
 						last.attr( "title", $.trim( last.getEncodedText() ) );
-						if ( !createEnhanced ) {
+
+						if ( newSpan ) {
 							last.empty().prepend( span );
 						}
 
 						// Reduce to the first anchor, because only the first gets the buttonClass
 						a = a.first();
 					} else if ( icon ) {
-						span = createEnhanced ? a.children( ".ui-listview-item-icon" ) :
-							$( "<span>" );
+
+						newSpan = false;
+						span = a.children( ".ui-listview-item-icon" );
+						if ( !span.length ) {
+							span = $( "<span>" );
+							newSpan = true;
+						}
+
 						addItemToDictionary( itemClassDict, span[ 0 ], "ui-listview-item-icon",
 							"ui-icon ui-icon-" + icon + " ui-widget-icon-floatend" );
-						if ( !createEnhanced ) {
+
+						if ( newSpan ) {
 							a.prepend( span );
 						}
 					}

tests/integration/listview/index.html

@@ -181,6 +181,16 @@
 				</li>
 			</ul>
 
+			<ul data-ui-role="listview" id="icon-refresh">
+				<li data-ui-icon="home"><a href="#">Home</a></li>
+				<li data-ui-icon="delete"><a href="#">Delete</a></li>
+			</ul>
+
+			<ul data-ui-role="listview" id="icon-update-items">
+				<li data-ui-icon="home"><a href="#">Home</a></li>
+				<li data-ui-icon="delete"><a href="#">Delete</a></li>
+			</ul>
+
 			<ul data-ui-role="listview" id="sparing-check">
 				<li id="sparing-check-first-item">Item 1</li>
 				<li id="sparing-check-second-item">Item 2</li>

tests/integration/listview/listview_core.js

@@ -489,4 +489,28 @@ QUnit.test( "updateItems()", function( assert ) {
 		"The single item in the call is as expected" );
 } );
 
+QUnit.module( "Dynamic icon update" );
+
+QUnit.test( "via refresh()", function( assert ) {
+	var listview = $( "#icon-refresh" );
+
+	listview.children().first().attr( "data-ui-icon", "back" );
+	listview.listview( "refresh" );
+
+	assert.hasClasses( listview.children().first().find( ".ui-listview-item-icon" ),
+		"ui-icon-back",
+		"Listview item icon is as expected" );
+} );
+
+QUnit.test( "via updateItems()", function( assert ) {
+	var listview = $( "#icon-update-items" );
+
+	listview.children().first().attr( "data-ui-icon", "back" );
+	listview.listview( "updateItems", listview.children().first() );
+
+	assert.hasClasses( listview.children().first().find( ".ui-listview-item-icon" ),
+		"ui-icon-back",
+		"Listview item icon is as expected" );
+} );
+
 } );