Swipe then load template. Suggestions?

help
1

Let’s say I have 4 tabs, namely Home, Orders, Settings and Wishlist. Each tab has its own set of data as you can guess. What I want to achieve is, user swipe the page (using hammer.js) different templates and data will be rendered.

if I have the following template:

<template name="layout">
 <ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#orders">Orders</a></li>
  <li><a href="#settings">Settings</a></li>
  <li><a href="#wishlist">Wishlist</a></li>
 </ul>

 <div id="home">
  {{> home}}
 </div>
 <div id="orders">
  {{> orders}}
 </div>
 <div id="settings">
  {{> settings}}
 </div>
 <div id="wishlist">
  {{> wishlist}}
 </div>
</template>

I want to achieve template level subscription when user swipe from one tab to another. Am I going into the right direction?