Permalink
Browse files

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

…geshow event handler
  • Loading branch information...
1 parent c1a00c5 commit 3e67ca06ca852f337ac4d5ec4238a182bba21f7e @dgeb committed Nov 4, 2011
Showing with 35 additions and 21 deletions.
  1. +6 −3 README.md
  2. +6 −4 a.html
  3. +11 −6 app.js
  4. +6 −4 b.html
  5. +6 −4 c.html
View
@@ -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
View
10 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>
View
17 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;
+}
View
10 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>
View
10 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>

0 comments on commit 3e67ca0

Please sign in to comment.