1.0_latest now works with selective caching that requires a custom pa…

…geshow event handler
dgeb · Nov 4, 2011 · 3e67ca0 · 3e67ca0
1 parent c1a00c5
commit 3e67ca0
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -5,11 +5,14 @@ https://github.com/jquery/jquery-mobile/issues/2520
 
 Please see the branches of this project to see the different behaviour.
 
-## jquery-mobile 1.0rc1 - without DOM caching
+## jquery-mobile 1.0_latest - with selective DOM caching
 
-In this branch, pages are not cached and therefore shouldn't need to be removed. However, the initial page that's loaded will never be refreshed.
+This branch was created after jblas landed the following fix:
+https://github.com/jquery/jquery-mobile/commit/97e3f8a800a44227ceff13d1c825953a051ef782
 
-For example, load Page A, then Page B, and then return to Page A. You'll notice that the page loaded time doesn't change, nor does the navbar highlight.
+In this branch, pages are selectively cached using the data-dom-cache attribute on each page. A custom pageshow event handler determines whether to remove the previous page. Caching should not be dependent upon which pages are embedded when the first page loads.
+
+In this particular example, page C is the only page that should be cached.
 
 ## MIT LICENSE
 

diff --git a/a.html b/a.html
@@ -4,13 +4,13 @@
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>Page A</title>
-  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
+  <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
   <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
-  <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
+  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
   <script src="app.js"></script>
 </head> 
 <body>
-<div data-role="page">
+<div data-role="page" data-dom-cache="false">
   <div data-role="header">
     <div data-role="navbar">
       <ul>
@@ -21,7 +21,9 @@
     </div>    
   </div>
   <div data-role="content">
-    Page A loaded: <span class="load-time">...</span>
+    <p>Page A loaded: <span class="load-time">...</span></p>
+
+    <p>This page should <strong>never be cached</strong>.</p>
   </div>
 </div>
 </body>

diff --git a/app.js b/app.js
@@ -1,9 +1,5 @@
-$(document).bind("mobileinit", function() {
-  $.mobile.page.prototype.options.domCache = false;
-});
-
-//$(document).bind('pageshow',function(event, ui) {
-//  if (ui.prevPage) ui.prevPage.remove();
+//$(document).bind("mobileinit", function() {
+//  $.mobile.page.prototype.options.domCache = true;
 //});
 
 $(document).bind('pagecreate',function(event, ui) {
@@ -18,3 +14,12 @@ $(document).bind('pagecreate',function(event, ui) {
   page.find('.load-time').text(hours + ":" + minutes + ":" + seconds);
 });
 
+$(document).bind('pageshow',function(event, ui) {
+  var prevPage = ui.prevPage ;
+  if (ui.prevPage && !shouldPageBeCached(ui.prevPage))
+    ui.prevPage.remove();
+});
+
+function shouldPageBeCached(page) {
+  return page.attr("data-dom-cache") != "false" || $.mobile.page.prototype.options.domCache;
+}
diff --git a/b.html b/b.html
@@ -4,13 +4,13 @@
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>Page B</title>
-  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
+  <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
   <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
-  <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
+  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
   <script src="app.js"></script>
 </head> 
 <body>
-<div data-role="page">
+<div data-role="page" data-dom-cache="false">
   <div data-role="header">
     <div data-role="navbar">
       <ul>
@@ -21,7 +21,9 @@
     </div>    
   </div>
   <div data-role="content">
-    Page B loaded: <span class="load-time">...</span>
+    <p>Page B loaded: <span class="load-time">...</span></p>
+
+    <p>This page should <strong>never be cached</strong>.</p>
   </div>
 </div>
 </body>

diff --git a/c.html b/c.html
@@ -4,13 +4,13 @@
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>Page C</title>
-  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
+  <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
   <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
-  <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
+  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
   <script src="app.js"></script>
 </head> 
 <body>
-<div data-role="page">
+<div data-role="page" data-dom-cache="true">
   <div data-role="header">
     <div data-role="navbar">
       <ul>
@@ -21,7 +21,9 @@
     </div>    
   </div>
   <div data-role="content">
-    Page C loaded: <span class="load-time">...</span>
+    <p>Page C loaded: <span class="load-time">...</span></p>
+
+    <p>This page should <strong>always be cached</strong>.</p>
   </div>
 </div>
 </body>