added functionality for dynamic template based on route params

src/jq-router.js

@@ -99,12 +99,7 @@
             if (!route) {
                 return;
             }
-
-            var url = route.relativeUrl;
-            for (var i = 0; i < route.params.length; i++) {
-                url = url.replace(':' + route.params[i], params[route.params[i]]);
-            }
-            return url;
+            return s.paramReplacer(route.relativeUrl, route, params);
         };
 
         /**
@@ -170,6 +165,24 @@
             return s;
         };
 
+        /**
+         * Replace Params for given string with route & params
+         * @param {string} 
+         * @param {object} route
+         * @param {object} params
+         * @returns {string} 
+         */
+        s.paramReplacer = function(str, route, params) {
+            if(!str){
+                return;
+            }
+            for (var i = 0; i < route.params.length; i++) {
+                str = str.replace(':' + route.params[i], params[route.params[i]]);
+            }
+
+            return str;
+        };
+
         /**
          * Initialize the router & this should be invoked on document ready.
          * @param {string} viewSelector

src/services/jq-router-renderer.js

@@ -70,7 +70,8 @@
                 }
 
                 if (!templateCache[_route.templateUrl] || !_route.cache) {
-                    requests.push(s.getViewTemplate(_route.templateUrl, _route.cache));
+                    var templateUrl = router.paramReplacer(_route.templateUrl, _route, params);
+                    requests.push(s.getViewTemplate(templateUrl, _route.cache));
                 }
             }
 

test/integration/template-request.test.js

@@ -0,0 +1,85 @@
+(function(chai, expect, sinon) {
+  describe(__filename, function() {
+    var requests = [];
+    before(function() {
+      require("../setup.config.js");
+    });
+
+    before(function(done) {
+      var ajaxStub = sinon.stub($, "ajax").callsFake(function(xhr) {
+        requests.push(xhr);
+        return Promise.resolve("<h1></h1>");
+      });
+
+      var routes = {};
+      routes["home"] = {
+        url: "#/",
+        templateUrl: "templates/index.html"
+      };
+      routes["users"] = {
+        abstract: true,
+        url: "#/users",
+        cache: true,
+        templateUrl: "templates/users/index.html"
+      };
+      routes["users.list"] = {
+        url: "",
+        cache: true,
+        templateUrl: "templates/users/list.html"
+      };
+      routes["users.add"] = {
+        url: "/add",
+        templateUrl: "templates/users/add.html"
+      };
+      routes["users.detail"] = {
+        url: "/:id",
+        cache: false,
+        templateUrl: "users.php?userId=:id"
+      };
+      routes["users.edit"] = {
+        url: "/:id/edit",
+        templateUrl: "templates/users/edit.html"
+      };
+      $.router
+        .setData(routes, false)
+        .setDefault("home")
+        .run(".my-view", "home");
+
+      setTimeout(function() {
+        done();
+      }, 20);
+    });
+
+    after(function() {
+      $.ajax.restore();
+    });
+
+    afterEach(function() {
+      requests = [];
+      JSDOM.reconfigure({ url: URL });
+    });
+
+    it("should load home route template", function() {
+      expect(requests[0].url).to.be.eq("templates/index.html");
+    });
+
+    it("should load users.add route template", function(done) {
+      var routeName = "users.add";
+      $.router.go(routeName);
+      setTimeout(function() {
+        expect(requests[0].url).to.be.eq("templates/users/index.html");
+        expect(requests[1].url).to.be.eq("templates/users/add.html");
+        done();
+      }, 20);
+    });
+
+    it("should load dynamic/server template for users.details route", function(done) {
+      var routeName = "users.detail";
+      $.router.go(routeName, { id: 101 });
+      setTimeout(function() {
+        expect(requests[0].url).to.be.eq("users.php?userId=101");
+        done();
+      }, 20);
+    });
+  });
+})(require("chai"), require("chai").expect, require("sinon"));

test/setup.config.js

@@ -3,7 +3,7 @@
 
   global.URL = "http://jq-router.com/";
   global.JSDOM = new jsdom.JSDOM(
-    "<!DOCTYPE html><html><head></head><body></body></html>",
+    "<!DOCTYPE html><html><head></head><body><div class='my-view'></div></body></html>",
     {
       url: URL
     }