Before I start - a quick apology. I know that this particular topic has been covered before, but I'm having a heck of a time finding the article. I wanted to build a quick example for a friend anyway so I thought I'd share. In this example, I've got a HarpJS site with a list of articles. For fun I also added a main image for each article. Here is the data source.
{
"article1":{
"title":"Article One",
"img":"/img/k1.jpg"
},
"article2":{
"title":"Article Two",
"img":"/img/k2.jpg"
},
"article3":{
"title":"Article Three",
"img":"/img/k3.jpg"
}
}
Next I whipped up a quick index page to list my articles. Notice that I'm also including a thumbnail (via CSS) version of the image in the list as well. This is me being fancy - I hope you are impressed.
<h2>Articles</h2>
<%
for(articleKey in public.articles._data) {
article = public.articles._data[articleKey];
%>
<p>
<img src="<%- article.img %>" class="articleImageList">
<a href="/articles/<%- articleKey %>.html"><%- article.title %></a>
</p>
<br clear="left">
<% } %>
A screen shot - I didn't include the source of the CSS but the entire application is posted as an attachment to this entry.
Ok, now lets talk Next/Previous links. I created three article files and pasted in some random text (thank you Cajun Ipsum). In order to simplify article display, I put a header and footer partial in each file. (Note - this is because HarpJS does not support nested layouts. There is a workaround for this that I'll show later.) Here is a sample article, minus some of the boilerplate text.
<%- partial("_articleheader") %>
<p>
Boiled crawfish pecan pie food etoufee andouille football. Envie levee andouille bisque couillon beignet envie yams. Praline jambalaya tasso sa fait chaud sugar cane hot sauce remoulade po-boy boiled crawfish. Boudreaux pirogue sa fait chaud boucherie smoked sausage Boudreaux interstate bourre andouille. Sa fait chaud bourre trail ride viens ci mirliton. Turducken fais do do bread pudding coffee bisque Acadiana turducken coffee pirogue alligator. Viens ci boudin bourre sa fait chaud praline canaille levee macque choux gumbo bonjour. Couillon fried catfish bisque canaille bbq.
</p>
<%- partial("_articlefooter") %>
Don't worry about the article header. All it does is output the title and the image. The footer is where the magic is. For my example, I decided to always include text for previous and next links, but to simply disable the link when you were at the beginning or end of the list. It would take a few seconds to modify the code to not display anything instead in those situations. Here is my partial.
<%
var pos, prevLink, nextLink;
var articles = Object.keys(public.articles._data);
if(articles[0] != current.source) {
pos = articles.indexOf(current.source);
prevLink = "<a href='/articles/" + articles[pos-1] + ".html'>Previous Article</a>";
} else prevLink = "Previous Article";
if(articles[articles.length-1] != current.source) {
pos = articles.indexOf(current.source);
nextLink = "<a href='/articles/" + articles[pos+1] + ".html'>Next Article</a>";
} else nextLink = "Next Article";
%>
<%- prevLink %> / <%- nextLink %>
<br clear="left"/>Not exactly rocket science, right? I simply get the keys from the data and see if I'm currently at the start or end. (Remember HarpJS supports passing data about where you are currently.) And that's it. Here is a screen shot from the first article as an example.
You can download the source for this demo below.