added ability to control the caching of template url, allowing templa…

…te url set to server side pages
muzammilkm · Jan 19, 2019 · 8b9365d · 8b9365d
1 parent 92dee3d
commit 8b9365d
Show file tree

Hide file tree

Showing 12 changed files with 111 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -17,6 +17,9 @@ Built on jQuery 1.3.0 & Inspried by (Angular ui-router & jQuery Single Page Appl
 ## Demo
 * [Simple](https://muzammilkm.github.io/jq-router/docs/simple/index.html)
 	* Easy & Simple
+* [Simple-Non-Cache](https://muzammilkm.github.io/jq-router/docs/simple-non-cache/index.html)
+	* Easy & Simple
+	* Cachable Routes
 * [Nested Views](https://muzammilkm.github.io/jq-router/docs/nested-views/index.html)
 	* Nested View (Parent > Child > Grand Child)
 * [Lazy Store](https://muzammilkm.github.io/jq-router/docs/lazy-store/index.html)
@@ -97,6 +100,7 @@ Routes is collection of route objects. Each route object consists of url, templa
 
     route["parent.child.grandchild"] = {
 	url: '', 
+	cache: bool,
 	templateUrl: ''
     }
 ```
@@ -113,13 +117,30 @@ url: ''
 ```javascript
 templateUrl: ''
 ```
+> Allowing caching of route template or you can also set default to all routes in setData,  
+```javascript
+cahce: true || false
+```
 > Path to render the view in matched view selector.
 
 ```javascript
 resolve: callback //function or [] of function
 ```
 > A callback function or array of function's which is executed when a route is matched & route is rendered only when all deferred objects are resolved.s
 
+```javascript
+ $.router.setData(data, isCacheTempalte);
+```
+> setDate takes two parameters 
+* data: A route object which contains route definition, like url, template url, route is parent & should it be cached.
+* isCacheTempalte: If the templates are server side pages (like php, aspx, jsp, or server rendered). Then you set this to false & templates are not cached.
+
+```javascript
+ $.router.setDefault(name);
+```
+> setDefault 
+* name: A route name, if the url does not match to any route, router will redirect to default secified route.
+
 ```javascript
 $.when($.ready)
   .then(function() {

diff --git a/dist/jq-router.js b/dist/jq-router.js
@@ -197,9 +197,10 @@
          * @param {object} data
          * @return {object} this
          */
-        s.setData = function(data) {
+        s.setData = function(data, isCacheTempalte) {
             var s = this;
 
+            isCacheTempalte = isCacheTempalte === undefined ? true : isCacheTempalte;
             s.routes = {};
             for (var routeName in data) {
                 var segments = routeName.split('.'),
@@ -226,6 +227,7 @@
                 urlExpr = new RegExp("^" + relativeUrl.replace(expr.Param_Matcher, expr.Param_Replacer) + "$");
                 route.relativeUrl = relativeUrl;
                 route.urlExpr = urlExpr;
+                route.cache = route.hasOwnProperty("cache") ? route.cache : isCacheTempalte;
             }
             return s;
         };
@@ -403,9 +405,10 @@
          * @param {string} url
          * @return {object} deferred
          */
-        s.getViewTemplate = function(url) {
+        s.getViewTemplate = function(url, cache) {
             return $.get({
                     url: url,
+                    cache: cache,
                     dataType: 'html'
                 })
                 .then(function(content) {
@@ -435,8 +438,8 @@
                     requests.push(_route.resolve(route, params));
                 }
 
-                if (!templateCache[_route.templateUrl]) {
-                    requests.push(s.getViewTemplate(_route.templateUrl));
+                if (!templateCache[_route.templateUrl] || !_route.cache) {
+                    requests.push(s.getViewTemplate(_route.templateUrl, _route.cache));
                 }
             }
 

diff --git a/dist/jq-router.min.js b/dist/jq-router.min.js
diff --git a/docs/index.html b/docs/index.html
@@ -40,6 +40,13 @@
                 <li>Easy &amp; Simple</li>
             </ul>
         </li>
+        <li><a href="simple-non-cache/index.html">Simple Non Cacheable</a>
+            <ul>
+                <li>Easy &amp; Simple</li>
+                <li>Non Cacheable template</li>
+                <li>Non Cacheable template per route</li>
+            </ul>
+        </li>
         <li><a href="nested-views/index.html">Nested Views</a>
             <ul>
                 <li>Nested View (Parent &gt; Child &gt; Grand Child)</li>

diff --git a/docs/scripts/jq-router.js b/docs/scripts/jq-router.js
@@ -197,9 +197,10 @@
          * @param {object} data
          * @return {object} this
          */
-        s.setData = function(data) {
+        s.setData = function(data, isCacheTempalte) {
             var s = this;
 
+            isCacheTempalte = isCacheTempalte === undefined ? true : isCacheTempalte;
             s.routes = {};
             for (var routeName in data) {
                 var segments = routeName.split('.'),
@@ -226,6 +227,7 @@
                 urlExpr = new RegExp("^" + relativeUrl.replace(expr.Param_Matcher, expr.Param_Replacer) + "$");
                 route.relativeUrl = relativeUrl;
                 route.urlExpr = urlExpr;
+                route.cache = route.hasOwnProperty("cache") ? route.cache : isCacheTempalte;
             }
             return s;
         };
@@ -403,9 +405,10 @@
          * @param {string} url
          * @return {object} deferred
          */
-        s.getViewTemplate = function(url) {
+        s.getViewTemplate = function(url, cache) {
             return $.get({
                     url: url,
+                    cache: cache,
                     dataType: 'html'
                 })
                 .then(function(content) {
@@ -435,8 +438,8 @@
                     requests.push(_route.resolve(route, params));
                 }
 
-                if (!templateCache[_route.templateUrl]) {
-                    requests.push(s.getViewTemplate(_route.templateUrl));
+                if (!templateCache[_route.templateUrl] || !_route.cache) {
+                    requests.push(s.getViewTemplate(_route.templateUrl, _route.cache));
                 }
             }
 

diff --git a/docs/simple-non-cache/index.html b/docs/simple-non-cache/index.html
@@ -0,0 +1,49 @@
+<html>
+<title>JS Router | Basic</title>
+
+<head></head>
+
+<body>
+	<div class="menu">
+		<a href="#/">Home</a> | <a href="#/cache">Cached</a> | <a href="#/non-cache">Not Cached</a>
+	</div>
+	<div class="my-view"></div>
+	<footer class="footer" style="clear:both; text-align: center">
+		<p>jq-router is maintained by <a href="https://github.com/muzammilkm">muzammilkm</a></p>
+		<p>go to jq-router <a href="/jq-router">documentation</a></p>
+	</footer>
+	<script type="text/javascript" src="../scripts/jquery-3.2.1.min.js"></script>
+	<script type="text/javascript" src="../scripts/jq-router.js"></script>
+	<script type="text/javascript">
+		var routes = {},
+			defaultRoute = 'home';
+
+		routes['home'] = {
+			url: '#/',
+			templateUrl: 'templates/home.html'
+		};
+
+		routes['cache-route'] = {
+			url: '#/cache',
+			cache: true,
+			templateUrl: 'templates/cache-route.html'
+		};
+
+		routes['non-cache-route'] = {
+			url: '#/non-cache',
+			cache: false,
+			templateUrl: 'templates/non-cache-route.html'
+		};
+
+		$.router
+			.setData(routes, false)
+			.setDefault(defaultRoute);
+
+		$.when($.ready)
+			.then(function() {
+				$.router.run('.my-view', 'home');
+			});
+	</script>
+</body>
+
+</html>
diff --git a/docs/simple-non-cache/templates/cache-route.html b/docs/simple-non-cache/templates/cache-route.html
@@ -0,0 +1,4 @@
+<h1>Cache Page</h1>
+<p>
+    Look in network tab...
+</p>
diff --git a/docs/simple-non-cache/templates/home.html b/docs/simple-non-cache/templates/home.html
@@ -0,0 +1 @@
+<h1>Home</h1>
diff --git a/docs/simple-non-cache/templates/non-cache-route.html b/docs/simple-non-cache/templates/non-cache-route.html
@@ -0,0 +1,4 @@
+<h1>Non-Cache Page</h1>
+<p>
+    Look in network tab...
+</p>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jq-router",
-  "version": "4.3.0",
+  "version": "4.5.0",
   "description": "A tiny jQuery plugin for building single page application (SPA) with the possibility of nested views",
   "main": "index.js",
   "scripts": {

diff --git a/src/jq-router.js b/src/jq-router.js
@@ -195,11 +195,13 @@
         /**
          * Set route data by preparing params & expression.
          * @param {object} data
+         * @param {bool} isCacheTempalte default to true
          * @return {object} this
          */
-        s.setData = function(data) {
+        s.setData = function(data, isCacheTempalte) {
             var s = this;
 
+            isCacheTempalte = isCacheTempalte === undefined ? true : isCacheTempalte;
             s.routes = {};
             for (var routeName in data) {
                 var segments = routeName.split('.'),
@@ -226,6 +228,7 @@
                 urlExpr = new RegExp("^" + relativeUrl.replace(expr.Param_Matcher, expr.Param_Replacer) + "$");
                 route.relativeUrl = relativeUrl;
                 route.urlExpr = urlExpr;
+                route.cache = route.hasOwnProperty("cache") ? route.cache : isCacheTempalte;
             }
             return s;
         };

diff --git a/src/services/jq-router-renderer.js b/src/services/jq-router-renderer.js
@@ -33,11 +33,13 @@
         /**
          * Download the template from server via ajax call.
          * @param {string} url
+         * @param {bool} cache
          * @return {object} deferred
          */
-        s.getViewTemplate = function(url) {
+        s.getViewTemplate = function(url, cache) {
             return $.get({
                     url: url,
+                    cache: cache,
                     dataType: 'html'
                 })
                 .then(function(content) {
@@ -67,8 +69,8 @@
                     requests.push(_route.resolve(route, params));
                 }
 
-                if (!templateCache[_route.templateUrl]) {
-                    requests.push(s.getViewTemplate(_route.templateUrl));
+                if (!templateCache[_route.templateUrl] || !_route.cache) {
+                    requests.push(s.getViewTemplate(_route.templateUrl, _route.cache));
                 }
             }