Get basic hashtag navigation working with mojo template

lib/articles.rb

@@ -15,6 +15,7 @@ module WezM
           :title => article[:title],
           :path => article.identifier,
           :date => Time.parse(article[:created_at]).rfc2822,
+          :summary => 'Insert summary here'
         }
       end
 

output/js/articles.js

@@ -1,110 +1,66 @@
-jQuery(function(){
+(function() {
-  
+  // Load articles JSON ASAP
-  // Keep a mapping of url-to-container for caching purposes.
   var articles = null;
 
+  function render_article(o) {
+    return '<li>\n\
+      <abbr class="calender date" title="' + (Mojo.escape(Mojo.normalize(o.date))) + '">\n\
+        <span class="day">' + (Mojo.escape(Mojo.normalize(o.day))) + '</span>\n\
+        <span class="month">' + (Mojo.escape(Mojo.normalize(o.month))) + '</span>\n\
+        <span class="year">' + (Mojo.escape(Mojo.normalize(o.year))) + '</span>\n\
+      </abbr>\n\
+      <p>\n\
+        <strong><a href="' + (Mojo.escape(Mojo.normalize(o.path))) + '">' + (Mojo.escape(Mojo.normalize(o.title))) + '</a></strong>\n\
+        ' + (Mojo.escape(Mojo.normalize(o.summary))) + '\n\
+      </p>\n\
+    </li>';
+  };
+
   function articles_loaded(data) {
     articles = data;
-    $('.pagination').slideDown('fast');
+    jQuery(function() {
+      $(window).bind('hashchange', function(e) {
+        // Get the hash (fragment) as a string, with any leading # removed. Note that
+        // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
+        var page;
+        var matches;
+        var page_fragment = e.fragment;
+        if(matches = page_fragment.match(/page-(\d+)$/)) {
+          page = new Number(matches[1]);
+        }
+        else {
+          return false;
+        }
+
+        // Generate the items
+        var per_page = 10;
+        var container = $('ul.articles');
+        container.empty();
+        var i = (page - 1) * per_page;
+        for(; i < page * per_page; i++) {
+          var article = articles[i];
+          var date = new Date(Date.parse(article.date));
+          var article_view = {
+            date: article.date,
+            day: date.getDay(),
+            month: date.getMonth(),
+            year: date.getYear(),
+            path: article.path,
+            title: article.title,
+            summary: article.summary
+          };
+          var li = render_article(article_view);
+          container.append(li);
+        }
+        
+      });
+
+      $('.pagination').slideDown('fast');
+
+      // Since the event is only triggered when the hash changes, we need to trigger
+      // the event now, to handle the hash the page may have loaded with.
+      $(window).trigger( 'hashchange' );
+    });
   };
-
+  jQuery.getJSON('json/articles.json', {}, articles_loaded);
-  function show_page() {
+})();
-    
-  };
-  
-  // Bind an event to window.onhashchange that, when the history state changes,
-  // gets the url from the hash and displays either our cached content or fetches
-  // new content to be displayed.
-  $(window).bind('hashchange', function(e) {
-    
-    // Get the hash (fragment) as a string, with any leading # removed. Note that
-    // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
-    var url = e.fragment;
-    
-    if ( articles ) {
-      // Since the element is already in the cache, it doesn't need to be
-      // created, so instead of creating it again, let's just show it!
-      
-      
-    } else {
-      // // Show "loading" content while AJAX content loads.
-      // $( '.bbq-loading' ).show();
-      // 
-      // // Create container for this url's content and store a reference to it in
-      // // the cache.
-      // cache[ url ] = $( '<div class="bbq-item"/>' )
-      //   
-      //   // Append the content container to the parent container.
-      //   .appendTo( '.bbq-content' )
-      //   
-      //   // Load external content via AJAX. Note that in order to keep this
-      //   // example streamlined, only the content in .infobox is shown. You'll
-      //   // want to change this based on your needs.
-      //   .load( url, function(){
-      //     // Content loaded, hide "loading" content.
-      //     $( '.bbq-loading' ).hide();
-      //   });
-      var d = new Date(Date.parse());
-      jQuery.get('json/articles.json', {}, articles_loaded, 'json');
-    }
-  })
-
-  $('.newer, .older').click(function() {
-    var elem = $(this);
-
-    var page;
-    var matches;
-    if(matches = elem.attr('href').match(/(\d+)$/)) {
-      page = new Number(matches[1]);
-    }
-    else {
-      return false;
-    }
-
-    var per_page = 10;
-
-    var i = (page - 1) * per_page;
-    for(; i < page * per_page; i++) {
-      console.log(articles[i].title);
-    }
-
-    return false;
-  });
-
-
-  // Since the event is only triggered when the hash changes, we need to trigger
-  // the event now, to handle the hash the page may have loaded with.
-  $(window).trigger( 'hashchange' );
-  
-});
-
-
-
-// var articles;
-// 
-
-// jQuery(function() {
-//   $('.newer, .older').click(function() {
-//     var elem = $(this);
-//     
-//     var page;
-//     var matches;
-//     if(matches = elem.attr('href').match(/(\d+)$/)) {
-//       page = new Number(matches[1]);
-//     }
-//     else {
-//       return false;
-//     }
-// 
-//     var per_page = 10;
-// 
-//     var i = (page - 1) * per_page;
-//     for(; i < page * per_page; i++) {
-//       console.log(articles[i].title);
-//     }
-// 
-//     return false;
-//   });
-// 
-//   jQuery.get('json/articles.json', {}, articles_loaded, 'json');
-// });

output/js/mojo.js

@@ -0,0 +1,58 @@
+
+// Mojo - Copyright TJ Holowaychuk <tj@vision-media.ca> (MIT Licensed)
+
+;(function(){
+  Mojo = {
+    
+    // --- Version
+    
+    version: '0.2.0',
+    
+   /**
+    * Escape HTML.
+    *
+    * @param  {string} html
+    * @return {string}
+    * @api public
+    */
+   
+    escape : function(html) {
+      if (!html) return
+      return html.toString()
+        .replace(/&/gmi, '&amp;')
+        .replace(/"/gmi, '&quot;')
+        .replace(/>/gmi, '&gt;')
+        .replace(/</gmi, '&lt;')
+    },
+
+    /**
+     * Normalize _object_ for output.
+     *
+     * @param  {object}object
+     * @return {mixed}
+     * @api public
+     */
+
+    normalize: function(object) {
+      return typeof object == 'function' ? object() : object
+    },
+
+    /**
+     * Enumerate _object_'s _prop_, buffering _fn_'s
+     * return value.
+     *
+     * @param  {object} object
+     * @param  {object} prop
+     * @return {string}
+     * @api private
+     */
+    
+    enumerate: function(object, prop, fn) {
+      if (!prop) return ''
+      if (!(prop instanceof Array)) return fn(object)
+      for (var buf = [], i = 0, len = prop.length; i < len; ++i)
+        buf.push(fn(prop[i]))
+      return buf.join(' ')
+    }
+  }
+})()

templates/article.html

@@ -0,0 +1,11 @@
+<li>
+  <abbr class="calender date" title="{{date}}">
+    <span class="day">{{day}}</span>
+    <span class="month">{{month}}</span>
+    <span class="year">{{year}}</span>
+  </abbr>
+  <p>
+    <strong><a href="{{path}}">{{title}}</a></strong>
+    {{summary}}
+  </p>
+</li>