Remove hard-coded URLs from templates client-side code.

Closes #13

app.js

@@ -107,6 +107,7 @@ app.get('/templates.js', routes.templates);
 // **Note:** This needs to be the last route.
 app.get('/:place', routes.places.lookup('/places/'));
 
+PNM_ENV.ROUTES = exposedRoutes;
 app.expose(exposedRoutes, 'YUI.Env.PNM.ROUTES', 'pnm_env');
 
 // -- Exports ------------------------------------------------------------------

conf/config.json

@@ -70,6 +70,13 @@
                         "pnm-photo",
                         "yql"
                     ]
+                },
+
+                "pnm-helpers": {
+                    "path"    : "helpers.js",
+                    "requires": [
+                        "array-extras"
+                    ]
                 }
             },
 
@@ -121,6 +128,7 @@
                         "pnm-no-location-view",
                         "pnm-photos",
                         "pnm-place",
+                        "pnm-helpers",
                         "pnm-templates"
                     ]
                 }

lib/hbs.js

@@ -1,10 +1,11 @@
 var exphbs = require('express3-handlebars'),
-    Y      = require('yui').use('handlebars'),
+    Y      = require('yui').use('handlebars', 'pnm-helpers'),
 
     config = require('../conf/config');
 
 module.exports = exphbs.create({
     defaultLayout: config.layouts.main,
     handlebars   : Y.Handlebars,
+    helpers      : Y.PNM.Helpers,
     partialsDir  : config.dirs.templates
 });

public/js/app.js

@@ -89,7 +89,7 @@ PhotosNearMe = Y.Base.create('photosNearMe', Y.App, [], {
             var place = new Place(res.coords);
             place.load(function () {
                 self.set('place', place);
-                self.navigate('/places/' + place.get('id') + '/', {replace: true});
+                self.navigateToRoute('places', place, {replace: true});
             });
         });
     },
@@ -175,8 +175,14 @@ PhotosNearMe = Y.Base.create('photosNearMe', Y.App, [], {
         });
     },
 
+    navigateToRoute: function (routeName, context, options) {
+        var path = Y.PNM.Helpers.pathTo(routeName, context);
+        if (!path) { return false; }
+        return this.navigate(path, options);
+    },
+
     navigateToPhoto: function (e) {
-        this.navigate('/photos/' + e.photo.get('id') + '/');
+        this.navigateToRoute('photos', e.photo);
     }
 
 }, {
@@ -201,6 +207,7 @@ Y.namespace('PNM').App = PhotosNearMe;
         "pnm-no-location-view",
         'pnm-photos',
         'pnm-place',
+        'pnm-helpers',
         'pnm-templates'
     ]
 });

public/js/views/lightbox.js

@@ -44,12 +44,12 @@ LightboxView = Y.Base.create('lightboxView', Y.View, [], {
 
             if (prev) {
                 prev.loadImg();
-                nav.prev = prev.get('id');
+                nav.prev = prev;
             }
 
             if (next) {
                 next.loadImg();
-                nav.next = next.get('id');
+                nav.next = next;
             }
         }
 

shared/js/helpers.js

@@ -0,0 +1,39 @@
+YUI.add('pnm-helpers', function (Y) {
+
+var PNM_ENV = YUI.namespace('Env.PNM');
+
+    regexPathParam = /([:*])([\w\-]+)?/g;
+
+Y.namespace('PNM').Helpers = {
+    pathTo: function (routeName, context) {
+        context || (context = this);
+
+        var route = PNM_ENV.ROUTES[routeName],
+            path, keys;
+
+        if (!route) { return ''; }
+
+        path = route.path;
+        keys = Y.Array.map(route.keys, function (key) { return key.name; });
+
+        if (context && keys.length) {
+            if (context._isYUIModel) {
+                context = context.getAttrs(keys);
+            }
+
+            Y.Array.each(keys, function (key) {
+                var regex = new RegExp('[:*]' + key + '\\b');
+                path = path.replace(regex, context[key]);
+            });
+        }
+
+        // Replace missing params with empty strings.
+        return path.replace(regexPathParam, '');
+    }
+};
+
+}, '0.6.0', {
+    requires: [
+        'array-extras'
+    ]
+});

shared/templates/grid-photo.handlebars

@@ -1,5 +1,5 @@
 <li class="photo">
-    <a href="/photos/{{id}}/">
+    <a href='{{pathTo "photos" this}}'>
         <img title="{{title}}" src="{{thumbUrl}}"
             alt="Thumbnail of a photo with title: {{title}}" />
     </a>

shared/templates/header.handlebars

@@ -5,7 +5,7 @@
     </a>
 
   {{#if place}}
-    <a href="/places/{{place.id}}/">
+    <a href='{{pathTo "places" place}}'>
         Photos Near <span id="location">{{place.text}}</span>
     </a>
   {{else}}

shared/templates/lightbox.handlebars

@@ -1,11 +1,11 @@
 {{#if nav}}
 <ul class="lightbox-nav layout">
   {{#if nav.prev}}
-    <li class="prev"><a href="/photos/{{nav.prev}}/">« Previous</a></li>
+    <li class="prev"><a href='{{pathTo "photos" nav.prev}}'>« Previous</a></li>
   {{/if}}
 
   {{#if nav.next}}
-    <li class="next"><a href="/photos/{{nav.next}}/">Next »</a></li>
+    <li class="next"><a href='{{pathTo "photos" nav.next}}'>Next »</a></li>
   {{/if}}
 </ul>
 {{/if}}

views/layouts/main.handlebars

@@ -50,6 +50,11 @@
         photos = new Y.PNM.Photos({items: data.photos ? Y.JSON.parse(data.photos) : []});
         photo  = new Y.PNM.Photo(data.photo ? Y.JSON.parse(data.photo) : {});
 
+        // Register template helpers.
+        Y.Object.each(Y.PNM.Helpers, function (helper, name) {
+            Y.Handlebars.registerHelper(name, helper);
+        });
+
         // Create app.
         app = new Y.PNM.App({
             place : place,