From 8b9365d558dfb4f184a01bfc02323f3d94f0060e Mon Sep 17 00:00:00 2001 From: Muzammil Khaja Mohammed Date: Sat, 19 Jan 2019 19:36:20 +0530 Subject: [PATCH] added ability to control the caching of template url, allowing template url set to server side pages --- README.md | 21 ++++++++ dist/jq-router.js | 11 +++-- dist/jq-router.min.js | 2 +- docs/index.html | 7 +++ docs/scripts/jq-router.js | 11 +++-- docs/simple-non-cache/index.html | 49 +++++++++++++++++++ .../templates/cache-route.html | 4 ++ docs/simple-non-cache/templates/home.html | 1 + .../templates/non-cache-route.html | 4 ++ package.json | 2 +- src/jq-router.js | 5 +- src/services/jq-router-renderer.js | 8 +-- 12 files changed, 111 insertions(+), 14 deletions(-) create mode 100644 docs/simple-non-cache/index.html create mode 100644 docs/simple-non-cache/templates/cache-route.html create mode 100644 docs/simple-non-cache/templates/home.html create mode 100644 docs/simple-non-cache/templates/non-cache-route.html diff --git a/README.md b/README.md index 92d4b98..824cdce 100644 --- 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,6 +117,10 @@ 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 @@ -120,6 +128,19 @@ 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 index 0b55f98..94510cb 100644 --- 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 index 66ac229..c7573a6 100644 --- a/dist/jq-router.min.js +++ b/dist/jq-router.min.js @@ -1 +1 @@ -!function(e,t){var r,n={route:{},params:{}};r=function(){var r,a={},o=!0,u={Param_Replacer:"([^/]+)",Param_Matcher:/:([\w\d]+)/g};return a.getCurrentParams=function(){return n.params},a.getCurrentRoute=function(){return n.route},a.getRouteName=function(e){return this.routes[e]},a.getRouteParams=function(t){for(var r=this,n={},a=t.urlExpr.exec(t.url),o=0;o=n;o--){var u=t.getRouteName(r[o]);e(window).trigger(t.events.viewDestroyed,[u])}return a},n.getViewTemplate=function(t){return e.get({url:t,dataType:"html"}).then(function(e){a[t]=e})},n.processRoute=function(r,n){for(var o=this,u=[],s=0;s=n;o--){var u=t.getRouteName(r[o]);e(window).trigger(t.events.viewDestroyed,[u])}return a},n.getViewTemplate=function(t,r){return e.get({url:t,cache:r,dataType:"html"}).then(function(e){a[t]=e})},n.processRoute=function(r,n){for(var o=this,u=[],s=0;sEasy & Simple +
  • Simple Non Cacheable +
      +
    • Easy & Simple
      • +
    • Non Cacheable template
      • +
    • Non Cacheable template per route
      • +
    +
  • Nested Views
    • Nested View (Parent > Child > Grand Child)
      • diff --git a/docs/scripts/jq-router.js b/docs/scripts/jq-router.js index 0b55f98..94510cb 100644 --- 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 new file mode 100644 index 0000000..3828853 --- /dev/null +++ b/docs/simple-non-cache/index.html @@ -0,0 +1,49 @@ + +JS Router | Basic + + + + +
      + Home | Cached | Not Cached +
      +
      + + + + + + + \ No newline at end of file diff --git a/docs/simple-non-cache/templates/cache-route.html b/docs/simple-non-cache/templates/cache-route.html new file mode 100644 index 0000000..8c75787 --- /dev/null +++ b/docs/simple-non-cache/templates/cache-route.html @@ -0,0 +1,4 @@ +

      Cache Page

      +

      + Look in network tab... +

      \ No newline at end of file diff --git a/docs/simple-non-cache/templates/home.html b/docs/simple-non-cache/templates/home.html new file mode 100644 index 0000000..1cc855d --- /dev/null +++ b/docs/simple-non-cache/templates/home.html @@ -0,0 +1 @@ +

      Home

      \ No newline at end of file diff --git a/docs/simple-non-cache/templates/non-cache-route.html b/docs/simple-non-cache/templates/non-cache-route.html new file mode 100644 index 0000000..87e85da --- /dev/null +++ b/docs/simple-non-cache/templates/non-cache-route.html @@ -0,0 +1,4 @@ +

      Non-Cache Page

      +

      + Look in network tab... +

      \ No newline at end of file diff --git a/package.json b/package.json index 58c1306..8bd6d15 100644 --- 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 index 2220409..c37975b 100644 --- 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 index e3c1b82..da3afaf 100644 --- 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)); } }