HandlebaRss

Multiple 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="multiple-destination"></div>

Then add a handlebars template to the page.

<!-- the handlebars template for multiple feeds -->
<script id="multiple-feed-template" type="text/x-handlebars-template">
  {{#each entries}}
  <div class="entry">
    <h4><a href="{{link}}" class="entry-title">{{title}}</a></h4>
    <p>
      From <span class="feed-title">{{feed.title}}</span> 
      by <span class="author">{{feed.author}}</span>
      <br/>
      {{publishedDate}}
    </p>
  </div>
  {{/each}}
</script>

And finally a little JavaScript to kick things off.

rss = new HandlebaRss([
  "http://www.octolabs.com/blogs/octoblog/feed.xml",
  "http://datachomp.com/atom.xml",
  "http://geekindulgence.com/rss/",
  "http://www.okcruby.org/atom.xml",
  "http://okcjs.com/atom.xml",
  "http://joekarl.github.io/feed.xml",
  "http://vancelucas.com/feed.xml",
  "http://campbeja.github.io/feed.xml"
],"#multiple-feed-template","#multiple-destination",5);
rss.init();

Additional Info

For multiple feeds the context of the handlebars template is a JSON object that contains an entries array of the combined and sorted entries from all of the feeds. Each entry has a feed property that contains the data from the top level feed that the entry belongs to (author,description,feedUrl, etc...). In the template you can access these with something like {{feed.author}}.

{
  "entries" : [{...},{...},...]
}

Learn how to embed individual feeds.

This is the output