Merge pull request #1662 from gseguin/issue-1654

Issue 1654
jquery-archive · Jun 17, 2011 · 525543b · 525543b
2 parents 1dd6608 + ff8517c
commit 525543b
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 62 deletions.
diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js
@@ -74,68 +74,66 @@ $.widget( "mobile.listview", $.mobile.widget, {
 				itemClass = "ui-li";
 
 			// If we're creating the element, we update it regardless
-			if ( !create && item.hasClass( "ui-li" ) ) {
-				continue;
-			}
-
-			var itemTheme = item.jqmData("theme") || o.theme,
-				a = item.children( "a" );
-
-			if ( a.length ) {	
-				var icon = item.jqmData("icon");
-
-				item
-					.buttonMarkup({
-						wrapperEls: "div",
-						shadow: false,
-						corners: false,
-						iconpos: "right",
-						icon: a.length > 1 || icon === false ? false : icon || "arrow-r",
-						theme: itemTheme
-					});
-
-				a.first().addClass( "ui-link-inherit" );
-
-				if ( a.length > 1 ) {
-					itemClass += " ui-li-has-alt";
-
-					var last = a.last(),
-						splittheme = listsplittheme || last.jqmData( "theme" ) || o.splitTheme;
-
-					last
-						.appendTo(item)
-						.attr( "title", last.text() )
-						.addClass( "ui-li-link-alt" )
-						.empty()
-						.buttonMarkup({
-							shadow: false,
-							corners: false,
-							theme: itemTheme,
-							icon: false,
-							iconpos: false
-						})
-						.find( ".ui-btn-inner" )
-							.append( $( "<span />" ).buttonMarkup({
-								shadow: true,
-								corners: true,
-								theme: splittheme,
-								iconpos: "notext",
-								icon: listspliticon || last.jqmData( "icon" ) ||  o.splitIcon
-							} ) );
-				}
-
-			} else if ( item.jqmData( "role" ) === "list-divider" ) {
-				itemClass += " ui-li-divider ui-btn ui-bar-" + dividertheme;
-				item.attr( "role", "heading" );
-
-				//reset counter when a divider heading is encountered
-				if ( counter ) {
-					counter = 1;
-				}
-
-			} else {
-				itemClass += " ui-li-static ui-body-" + itemTheme;
-			}
+			if ( create || !item.hasClass( "ui-li" ) ) {
+                var itemTheme = item.jqmData("theme") || o.theme,
+                    a = item.children( "a" );
+
+                if ( a.length ) {
+                    var icon = item.jqmData("icon");
+
+                    item
+                        .buttonMarkup({
+                            wrapperEls: "div",
+                            shadow: false,
+                            corners: false,
+                            iconpos: "right",
+                            icon: a.length > 1 || icon === false ? false : icon || "arrow-r",
+                            theme: itemTheme
+                        });
+
+                    a.first().addClass( "ui-link-inherit" );
+
+                    if ( a.length > 1 ) {
+                        itemClass += " ui-li-has-alt";
+
+                        var last = a.last(),
+                            splittheme = listsplittheme || last.jqmData( "theme" ) || o.splitTheme;
+
+                        last
+                            .appendTo(item)
+                            .attr( "title", last.text() )
+                            .addClass( "ui-li-link-alt" )
+                            .empty()
+                            .buttonMarkup({
+                                shadow: false,
+                                corners: false,
+                                theme: itemTheme,
+                                icon: false,
+                                iconpos: false
+                            })
+                            .find( ".ui-btn-inner" )
+                                .append( $( "<span />" ).buttonMarkup({
+                                    shadow: true,
+                                    corners: true,
+                                    theme: splittheme,
+                                    iconpos: "notext",
+                                    icon: listspliticon || last.jqmData( "icon" ) ||  o.splitIcon
+                                } ) );
+                    }
+
+                } else if ( item.jqmData( "role" ) === "list-divider" ) {
+                    itemClass += " ui-li-divider ui-btn ui-bar-" + dividertheme;
+                    item.attr( "role", "heading" );
+
+                    //reset counter when a divider heading is encountered
+                    if ( counter ) {
+                        counter = 1;
+                    }
+
+                } else {
+                    itemClass += " ui-li-static ui-body-" + itemTheme;
+                }
+            }
 
 
 			if( o.inset ){	

diff --git a/tests/unit/listview/index.html b/tests/unit/listview/index.html
@@ -241,5 +241,20 @@ <h1>Split List View</h1>
 	</div>
 </div>
 
+<!-- Removing items from list -->
+<div  data-nstest-role="page" id='removing-items-from-list-test'>
+	<div  data-nstest-role="header" data-nstest-position="inline">
+		<h1>Basic List View</h1>
+	</div>
+	<div  data-nstest-role="content">
+		<ul  data-nstest-role="listview" data-nstest-inset="true">
+			<li>Item 1</li>
+			<li>Item 2</li>
+			<li>Item 3</li>
+			<li>Item 4</li>
+		</ul>
+	</div>
+</div>
+
 </body>
 </html>
diff --git a/tests/unit/listview/listview_core.js b/tests/unit/listview/listview_core.js
@@ -390,4 +390,22 @@
 		}, 1000);
 	});
 
+    module("Programmatic list items manipulation");
+
+    test( "Removing list items", 4, function() {
+        $.testHelper.openPage("#removing-items-from-list-test");
+        var ul = $('#removing-items-from-list-test ul');
+        ul.find("li").first().remove();
+        equal(ul.find("li").length, 3, "There should be only 3 list items left");
+
+        ul.listview('refresh');
+        ok(ul.find("li").first().hasClass("ui-corner-top"), "First list item should have class ui-corner-top");
+
+        ul.find("li").last().remove();
+        equal(ul.find("li").length, 2, "There should be only 2 list items left");
+
+        ul.listview('refresh');
+        ok(ul.find("li").last().hasClass("ui-corner-bottom"), "Last list item should have class ui-corner-bottom");
+    });
+
 })(jQuery);