HandlebaRss

Single feeds

This is the code

First add a place holder div where you want the feed to be rendered.

<!-- the placeholder for the single feed -->
<div id="single-destination"></div>

Then add a handlebars template to the page.

<!-- the handlebars template for the single feed -->
<script id="single-feed-template" type="text/x-handlebars-template">
<h2>
  <a href="{{link}}" class="feed-title">{{title}}</a> 
  by 
  <span class="author">{{author}}</span></h2>
  {{#each entries}}
    <div class="entry">
      <h4>
        <a href="{{link}}" class="entry-title">
          {{title}}
        </a>
      </h4>
      <p>{{contentSnippet}}</p>
    </div>
  {{/each}}
</script>

And finally a little JavaScript to kick things off.

var feedUrl = "http://www.octolabs.com/blogs/octoblog/feed.xml";
var template = "#single-feed-template";
var destination = "#single-destination";
rss = new HandlebaRss(feedUrl,template,destination);
rss.init();

Additional Info

For single feeds the context of the handlebars template is a JSON representation of a feed object.

{
  "author" : "Jeremy Green",
  "description" : "",
  "feedUrl" : "http://www.octolabs.com/blogs/octoblog/feed.xml",
  "link" : "http://www.octolabs.com/blogs/octoblog",
  "title" : "OctoBlog",
  "type" : "atom10",
  "entries" : [{...},{...}]
}

Learn how to embed multiple feeds.

This is the output