Permalink
Browse files

Listview: Re-implement recursion limitation

Closes gh-7646
Fixes gh-7644
Re gh-5680
  • Loading branch information...
gabrielschulhof committed Aug 28, 2014
1 parent 64d71a6 commit 4dbe7453fff965552ff3288368349af2ac60450c
Showing with 70 additions and 20 deletions.
  1. +27 −20 js/widgets/filterable.backcompat.js
  2. +24 −0 tests/unit/filterable/filterable_core.js
  3. +19 −0 tests/unit/filterable/index.html
@@ -6,7 +6,7 @@
define( [
"jquery",
"./listview",
"./listview.hidedividers",
"./filterable" ], function( jQuery ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
@@ -160,6 +160,24 @@ $.widget( "mobile.filterable", $.mobile.filterable, {
return ret;
},
// The listview implementation accompanying this filterable backcompat layer will call
// filterable.refresh() after it's done refreshing the listview to make sure the filterable
// filters out any new items added. However, when the listview refresh has been initiated by
// the filterable itself, then such filtering has already taken place, and calling the
// filterable's refresh() method will cause an infinite recursion. We stop this by setting a
// flag that will cause the filterable's refresh() method to short-circuit.
_refreshChildWidget: function() {
this._refreshingChildWidget = true;
this._superApply( arguments );
this._refreshingChildWidget = false;
},
refresh: function() {
if ( !this._refreshingChildWidget ) {
this._superApply( arguments );
}
},
_destroy: function() {
if ( this._isSearchInternal() ) {
this._search.remove();
@@ -207,29 +225,18 @@ $.widget( "mobile.listview", $.mobile.listview, {
return this._super();
},
_afterListviewRefresh: function() {
var filterable = this.element.data( "mobile-filterable" );
if ( this.options.filter === true && filterable ) {
this._preventRefreshLoop = true;
filterable.refresh();
}
},
// Eliminate infinite recursion caused by the fact that we call filterable.refresh() from
// _afterListviewRefresh() above, which, in turn, calls _refreshChildWidget(), which, in
// turn, calls listview refresh(), which would, in turn, calls _afterListviewRefresh()
// above, if we wouldn't prevent that right here.
refresh: function() {
var returnValue;
var filterable;
if ( !this._preventRefreshLoop ) {
returnValue = this._superApply( arguments );
}
this._superApply( arguments );
this._preventRefreshLoop = false;
if ( this.options.filter === true ) {
filterable = this.element.data( "mobile-filterable" );
return returnValue;
if ( filterable ) {
filterable.refresh();
}
}
}
});
@@ -71,4 +71,28 @@ test( "Refreshing the listview also refreshes the filterable", function() {
"All list items are hidden after listview refresh" );
});
asyncTest( "Empty dividers are hidden by default", function() {
var input = $( "#hide-empty-dividers-input" ),
listview = $( "#hide-empty-dividers" );
$.testHelper.detailedEventCascade([
function() {
input.val( "l" ).trigger( "change" );
},
{
filterablefilter: {
src: listview,
event: "filterablebeforefilter.emptyDividersHidden1"
}
},
function( result ) {
deepEqual( result.filterablefilter.timedOut, false,
"filterablefilter event was triggered" );
deepEqual( $( "#prev-is-hidden" ).prev().hasClass( "ui-screen-hidden" ), true,
"Divider for hidden item is hidden" );
start();
}
]);
});
})( jQuery );
@@ -70,6 +70,25 @@
<li>Item 1</li>
<li>Item 2</li>
</ul>
<form class="ui-filterable">
<input id="hide-empty-dividers-input" data-nstest-type="search">
</form>
<ul id="hide-empty-dividers" data-nstest-role="listview" data-nstest-filter="true" data-nstest-input="#hide-empty-dividers-input" data-nstest-autodividers="true" data-nstest-inset="true">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Albert</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Cameron</a></li>
<li><a href="#">Chloe</a></li>
<li><a href="#">Christina</a></li>
<li id="prev-is-hidden"><a href="#">Diana</a></li>
<li><a href="#">Gabriel</a></li>
<li><a href="#">Glen</a></li>
<li><a href="#">Ralph</a></li>
<li><a href="#">Valarie</a></li>
</ul>
</div>
</div>
</body>

0 comments on commit 4dbe745

Please sign in to comment.